以不同方式设置 ng-repeat 中每个元素的样式

Question

我有一个 ng-repeat 并且在 ng-repeat 里面每个备选 div 都有不同的 border-color。所以我用了

< div ng-repeat="channel in channelList">
    <div ng-style="getBgColor()">
</div

getBgColor() 定义为：

         $scope.currentColorIndex = (($scope.currentColorIndex+1) % $scope.radioColors.length);
         $scope.tileColor = $scope.radioColors[$scope.currentColorIndex].hex;
         return $scope.tileColor

我一直收到错误消息

$rootScope:infdig] 10 $digest() iterations reached

我知道为什么会出现错误，因为在每次 ng-repeat 迭代中我 return 都是一个不同的对象。解决这个问题的方法是什么？

Answer 1

使用 ngRepeat 允许您使用 $index.

<div ng-repeat="channel in channelList">
    <div ng-style="getBgColor($index)">
</div>

Answer 2

这里你甚至不需要调用函数，因为 ng-repeat 使用 $index 记录它的索引，你可以在内部元素中使用它。

<div ng-repeat="channel in channelList">
    <div ng-style="{color: radioColors[$index].hex}">
</div

它会将 color 属性分配给 radioColors[$index].hex 表达式返回的十六进制，其中 radioColors 是作用域对象。

Just go through this documentation

以不同方式设置 ng-repeat 中每个元素的样式

Style each element in ng-repeat differently

javascript

angularjs

ng-repeat

angularjs-digest