CODEWITHSUNDEEP
javascriptangularjsangularjs-ng-repeat
mediaguru
mediaguru

Reputation: 1927

Need unique data attribute on each ng-repeat

I have a data attribute in an ng-repeat which needs to be unique for each time the repeat loops. Can seem to use $index in the same line that defines it or I would do that.

Original code:

 <div ng-repeat="x in vm.country_list | itemsPerPage:5 track by $index" pagination-id="uniqueId">
      {{x.country}}
 </div>

Desired result:

 <div ng-repeat="x in vm.country_list | itemsPerPage:5 track by $index" pagination-id="uniqueId0">
      USA
 </div>
 <div ng-repeat="x in vm.country_list | itemsPerPage:5 track by $index" pagination-id="uniqueId1">
      Canada
 </div>
 <div ng-repeat="x in vm.country_list | itemsPerPage:5 track by $index" pagination-id="uniqueId2">
      Mexico
 </div>

Upvotes: 0

Views: 198

Answers (1)

Pop-A-Stash
Pop-A-Stash

Reputation: 6652

You can access the $index variable the same way you define your ng-repeat:

<div ng-repeat="x in vm.country_list | itemsPerPage:5 track by $index" 
     pagination-id="uniqueId{{$index}}">
  {{x.country}}
</div>

We've been told to assume that pagination-id is a data attribute. If that is actually true, then the above will work fine. If, on the other hand it is an Angular directive, then most likely the value is evaluated by Angular, in which case this would be the appropriate solution:

<div ng-repeat="x in vm.country_list | itemsPerPage:5 track by $index" 
     pagination-id="'uniqueId' + $index">
  {{x.country}}
</div>

Upvotes: 2

Related Questions