Style each element in ng-repeat differently

Question

I have a ng-repeat and inside the ng-repeat each alternative div has a different border-color . So i have used

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

getBgColor() is defined as :

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

I keep getting the error

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

I know why i am getting the error, since on every ng-repeat iteration i return a different object. What is the work around to this?

Answer 1

Here you dont even need to call a function, since ng-repeat records its index using $index you can use it in inner element.

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

It will assign the color property to the hex returned by the radioColors[$index].hex expression, where radioColors is scope object.

Just go through this documentation

Answer 2

Using ngRepeat allows you to use $index.

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