angularjs - ng-repeat 中的 $index 和 ng-if

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

 $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 数组仅在具有从 colorSeries 中选择的背景颜色的 div 中呈现水果，该背景颜色基于 colorSeries[0] 等索引，这将给我 #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 种颜色的颜色系列，那么对于这个 items 数组最后一项，即橙色需要一个索引为 colorSeries[4] 的颜色，即 undefined，因为我只渲染了三个项目。那么，是否有可能获得像 0,1,2 这样的索引，即使用 ng-if 呈现的元素的索引。

最佳答案

我会使用过滤器，而不是使用 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;
    };
}]);

关于angularjs - ng-repeat 中的 $index 和 ng-if，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/24650240/