Aymen Rizwan Aymen Rizwan - 2 months ago 8
AngularJS Question

Style each element in ng-repeat differently

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

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

Comments