為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迭代中，我都會返回一個不同的對象。 解決該問題的方法是什么？

Answer 1

在這里，您甚至不需要調用函數，因為ng-repeat使用$index記錄其$index您可以在內部元素中使用它。

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

它將color屬性分配給radioColors[$index].hex表達式返回的十六進制，其中radioColors是作用域對象。

只需閱讀本文檔

Answer 2

使用ngRepeat允許您使用$ index。

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