angularjs - ng-repeat 内的 $index 与 ng-if

Question

我有一个像这样的项目数组，其中包含随机顺序的动物列表和水果列表。

 $scope.items = [{name:'mango',type:'fruit'},{name:'cat',type:'animal'},{name:'dog',type:'animal'},{name:'monkey',type:'animal'},{name:'orange',type:'fruit'},{name:'banana',type:'fruit'},...]

然后我有一系列颜色，例如

$scope.colorSeries = ['#3366cc', '#dc3912', '#ff9900',...];

$scope.setBGColor = function (index) {
   return { background: $scope.colorSeries[index] }
}

我使用 items 数组仅在 div 中渲染水果，其背景颜色是根据 colorSeries[0] 等索引从 colorSeries 中选择的，这会给我 #3366cc

<div data-ng-repeat="item in items " ng-if="item.type =='fruit'">
   <label ng-style="setBGColor($index)">{{item.name}}</label>
</div>

如果 items 数组的长度小于 colorSeries 数组的长度，则一切正常。如果 colorSeries 数组的长度小于 items 数组，则会出现问题例如，如果我有一个包含 3 种颜色的颜色系列，那么对于该项目数组，最后一项(即橙色)将需要索引为 colorSeries[4] 的颜色，该颜色是 undefined 其中我只渲染了三个项目。那么，是否有可能获得像0,1,2这样的索引，即使用ng-if渲染的元素的索引。

Answer 1

我会使用过滤器，而不是使用ng-if。那么，$index将始终对应于应用过滤器后结果列表中的索引

<div data-ng-repeat="item in items|filterFruit">
   <label ng-style="setBGColor($index)">{{item.name}}</label>
</div>

angular.module('app.filters', []).filter('filterFruit', [function () {
    return function (fruits) {
        var i;
        var tempfruits = [];
        var thefruit;

        if (angular.isDefined(fruits) && 
            fruits.length > 0) {
                for(thefruit = fruits[i=0]; i<fruits.length; thefruit=fruits[++i]) {
                   if(thefruit.type =='fruit') 
                      tempfruits.push(thefruit);
                }
        }
        return tempfruits;
    };
}]);