Akash khan Akash khan - 1 month ago 6
AngularJS Question

Custom counter inside ng-repeat directive

I can not initialize custom counter and reset it inside ng-repeat directive. I have a colors array with three item

$scope.colors=['color1','color2','color3']


My colors array length is 2. I want to bind class in my ng-repeat list colors array 0 to 2 length. When it reach max of it's length then reset it to 0 and again repeat. I can implement it other place like php,jquery etc but i can't implement it on angular view.

<!-- single cat -->
<div ng-repeat="cat in contacts|filter:search.name">
<div class="item item-divider">
{{cat.name}} <span class="badge badge-positive">{{cat.data.length}}</span>
</div>

<!-- cat contact single -->
<a class="item" href="#" ng-repeat="p in cat.data">
<h2 class="letter colors[customerCounterIndex]">{{p.name.charAt(0)}}</h2>
<span class="name">{{p.name}}</span>
<p>{{p.phone}}</p>
</a>
<!-- end cat contact single -->
</div>
<!-- end single cat -->

Answer

Try this, <h2 class="letter" ng-class="colors[$index % colors.length]">

Comments