AngularJS Question

How to make iteration number/counter in ng-class

How to implement iteration in ng-class ? , below is my code

<div class="list-message">
<ul>
<li ng-repeat="mainList in itemsList" ng-class="{ active: isSet(i++)}" >
<a href ng-click="setTab(i++) " ng-repeat="x in mainList">
{{x.message_text}}
</a>
</li>
</ul>
</div>

<div class="detail-message">
<ul ng-repeat="mainList in itemsList track by $index" ng-show="isSet(i++)">
<li ng-repeat="x in mainList">
{{x.message_detail}}
</li>
</ul>
</div>


And the result that i want is like the example below.the iterarion inside ng class will be count iterarion number.

<div class="list-message">
<ul>
<li ng-repeat="mainList in itemsList" ng-class="{ active: isSet(1)}" >
<a href ng-click="setTab(1) " ng-repeat="x in mainList">
{{x.message_text}}
</a>
</li>

<li ng-repeat="mainList in itemsList" ng-class="{ active: isSet(2)}" >
<a href ng-click="setTab(2) " ng-repeat="x in mainList">
{{x.message_text}}
</a>
</li>

<li ng-repeat="mainList in itemsList" ng-class="{ active: isSet(3)}" >
<a href ng-click="setTab(3) " ng-repeat="x in mainList">
{{x.message_text}}
</a>
</li>
</ul>
</div>

<div class="detail-message">
<ul ng-repeat="mainList in itemsList track by $index" ng-show="isSet(1)">
<li ng-repeat="x in mainList">
{{x.message_detail}}
</li>
</ul>
<ul ng-repeat="mainList in itemsList track by $index" ng-show="isSet(2)">
<li ng-repeat="x in mainList">
{{x.message_detail}}
</li>
</ul>
<ul ng-repeat="mainList in itemsList track by $index" ng-show="isSet(3)">
<li ng-repeat="x in mainList">
{{x.message_detail}}
</li>
</ul>
</div>


Thank You , appreciate every single your comment and help.

Answer

Using $index will help you to keep a track of index. $index is a iterator offset of the repeated element (0..length-1).

You can use it like.

 <li ng-repeat="mainList in itemsList" ng-class="{ active: isSet($index)}" >
     <a href ng-click="setTab($index) " ng-repeat="x in mainList">
       {{x.message_text}}
     </a>
   </li>
Comments