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中选择的，基于像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 array，则会出现问题。如果我有颜色系列有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;
    };
}]);

Answer 2

试试这个..

 this.itemList = [{
        name:'apple'
    }, {
        name: 'fruit'
    }];

    this.colorlist = [{ color: 'red' }, { color: 'orange' }, { color: 'blue' }];

  <div data-ng-repeat="item in itemList " ng-if="item.name=='fruit'">
  <label ng-style="colorlist [$index]">{{item.name}}</label>
  </div>

Answer 3

如果我是你，我会在$scope.items对象中嵌入颜色，因为你总是将它们与水果一起使用。

无论如何，要解决您的特定代码配置，我会在控制器中添加一个计数器并使用它来循环显示颜色。
像这样：

app.controller('myCtrl', function ($scope) {

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

  var colorCounter = $scope.colorSeries.length;
  var colorIdx = -1;
  $scope.setBGColor = function () {
    // get back to the first color if you finished the loop
    colorIdx = colorCounter? 0: colorIdx+1

    return { background: $scope.colorSeries[colorIdx] }
  }

})

然后在您的观点中（请注意，没有$index）

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

使用ng-if在ng-repeat内的$ index

3 个答案: