Question

我试图在应该包含星形图像的ng-repeat上使用div，JSON中的每个饼都有1-5的rating属性，而我想用这个值来圈出x个星星。我有点工作，但它的方式存在缺陷，我不能对阵列进行重新排序，让星星跟随列表中的正确项目，因为我使用{ {1}}跟踪迭代。

我的解决方案也相当丑陋，因为我创建的数组具有与[$index]属性的值一样多的索引占位符，然后将其推入数组以循环出适当数量的图像。我想有一个更优雅的解决方案。

如何在不使用rating的情况下解决此问题？

JSON的片段：

[$index]

我的控制器：

{"pies": [
    ...

    {
        "name": "Blueberry pie", 
        "imageUrl": "img/blueberrypie.png", 
        "id": "1",
        "rating": "5", //Ng-repeat depending on this value
        "description": "Blueberry pie is amazing."
    },

    ...
]}

包含饼图项目的列表：

pieShopApp.controller('shopCtrl', ['$scope', '$http', '$routeParams', function ($scope, $http, $routeParams) {
    $scope.pieId = $routeParams.pieId,
    $scope.sortingOptions = ['A-Z', 'Rating'],
    $scope.sortingValues = ['name', 'rating'],
    $scope.ratings = [],
    $http.get('jsons/pies.json')
         .success(function(data, status) {
            $scope.pies = data;

            for (i = 0; i < $scope.pies.pies.length; i++) {

                switch ($scope.pies.pies[i].rating) {

                    case "1": $scope.ratings.push(["1"]); break;

                    case "2": $scope.ratings.push(["1", "2"]); break;

                    case "3": $scope.ratings.push(["1", "2", "3"]); break;

                    case "4": $scope.ratings.push(["1", "2", "3", "4"]); break;

                    case "5": $scope.ratings.push(["1", "2", "3", "4", "5"]); break;
                }
            }
            console.log($scope.ratings);
         })
         .error(function(status) {
            console.log(status);
         })
}]);

结果：

pies list

Answer 1

结帐this

<div ng-app='myApp' ng-controller="Main">
  <span ng-repeat="n in range('5')">Start{{$index}} &nbsp;&nbsp;</span>
</div>

$scope.range = function(count){

  var ratings = []; 

  for (var i = 0; i < count; i++) { 
    ratings.push(i) 
  } 

  return ratings;
}

将您的HTML更改为以下

<div id="pie-list-wrapper">
  <ul class="nav">
    <a href="#/pies/pieid" ng-repeat="pie in pies.pies | filter:query | orderBy:orderProp">
      <li class="list-item rounded-corners box-shadow">
        <aside>
          <img src="{{pie.imageUrl}}" no-repeat alt="Image of the pie">
        </aside>
        <header>
          <h1 ng-bind="pie.name" id="item-name" class="bold-text"></h1>
        </header>
        <article>
          <span ng-bind="pie.description" id="item-desc"></span>
        </article>
        <footer id="item-rating">
          <div ng-repeat="start in range(pie.rating)" class="rating-box"></div> //Contains the stars
        </footer>
      </li>
    </a>
  </ul>
</div>

Answer 2

我用这种方式解决了这个问题： “items”是$ scope中的对象数组，访问属性“rating”，如果值小于或等于“rating”属性，则可以显示星号。

在这个例子中，我使用了一些图标字体，但对于图像的情况是相同的。

<div ng-repeat="item in items">
    <div class="item-offers"">
        <img ng-src="{{item.image}}">
        <div class="item-not-rating">
            <i class="icon ion-ios-star icon-rating" ng-if="item.rate >= 1"></i>
            <i class="icon ion-ios-star icon-rating" ng-if="item.rate >= 2"></i>
            <i class="icon ion-ios-star icon-rating" ng-if="item.rate >= 3"></i>
            <i class="icon ion-ios-star icon-rating" ng-if="item.rate >= 4"></i>
            <i class="icon ion-ios-star icon-rating" ng-if="item.rate >= 5"></i>
        </div>                        
    </div>
</div>

我找到了一个更好的解决方案来解决这个问题：

https://github.com/fraserxu/ionic-rating

Answer 3

看起来你正在迭代pies，这就是$index从中获取其价值的地方。而不是ng-repeat="rating in ratings[$index]" 你应该使用ng-repeat="rating in range(pie.rating)" 这样，订购时评级将跟随您的馅饼。然后你可以完全删除控制器中的循环。

您是否可以提供更多HTML，以便我们可以看到$index的来源？

此致 Camusensei

编辑：你确实正在迭代pies.pies ng-repeat="pie in pies.pies | filter:query | orderBy:orderProp" 所以我之前写的应该有用。请参阅下面的详尽更改。

<强>控制器：

$http.get('jsons/pies.json')
     .success(function(data, status) {
        $scope.pies = data;
     })
     .error(function(status) {
        console.log(status);
     })

<强> HTML ：

<div ng-repeat="rating in range(pie.rating)" class="rating-box"></div>

EDIT2：抱歉，我忘记了范围功能（灵感来自Ariya Hidayat）：

$scope.range = function(count){
    return Array.apply(0, Array(+count));
}

Answer 4

问题是ng-repeat仅适用于数组或对象，因此您不能说迭代x次（而x是数字）

解决方案可能是在JavaScript中编写函数：

$scope.getNumber = function(num) {
    return (new Array(num));
}

然后使用此html显示没有$ index的星星：

<div ng-repeat="rating in getNumber(pie.rating)"></div>

Answer 5

在Angular 1.4+中，使用空数组时会出现以下错误：

错误：[ngRepeat：dupes]不允许在转发器中重复。

以下作品：

$scope.range = function(count) {
    return Array.apply(0, Array(+count)).map(function(value,index){
        return index;
    });
}

<div ng-app='myApp' ng-controller="Main">
    <span ng-repeat="n in range(5)">Start{{$index}} &nbsp;&nbsp;</span>
</div>

Ng重复整数值

5 个答案: