How can I increment the class names using ng-repeat?

Question

I set up an ng-repeat to rollout a bunch of elements from a JSON file however I would like each element to have a incremental class name .item-1, .item-2, .item-3.

<div ng-controller="itemCtrl">
  <div class="item" ng-repeat="item in items">
    <span class="item-{{ item.length }}"></span>
  </div>
</div>

I would like to add the number to class="item-{{ item.length}}" but I can't seem to get this working.

Answer 1

I don't know what is the benefit of generating dynamic class names like this. A class should mean a class of similar objects.

It's still possible with $index:

<div ng-controller="itemCtrl">
  <div class="item" ng-repeat="item in items">
    <span class="item-{{ $index }}"></span>
  </div>
</div>

https://docs.angularjs.org/api/ng/directive/ngRepeat

Answer 2

As documented on https://docs.angularjs.org/api/ng/directive/ngRepeat just use $index

<div ng-controller="itemCtrl">
  <div class="item" ng-repeat="item in items">
    <span class="item-{{ $index }}"></span>
  </div>
</div>