CODEWITHSUNDEEP
javascriptangularjsauto-increment
Salasar
Salasar

Reputation: 136

Increment/decrement into angular expression (id generation)

I want to do increment in nested ng-repeats like this:

<div ng-repeat="arr in extension.providers">
     <div id="pos{{++providerId}}"
          ng-repeat="provider in arr track by provider.id">
     </div>
</div>

Where 

$scope.providerId = 0;

But I get error

Error: [$parse:syntax] Syntax Error: Token '+' not a primary expression at column 11 of the expression ['pos' + (providerId++)] starting at [+providerId)].

I tried write increment in function, like in answer, but got id's like "pos398", "pos400" etc.

How can I generate id's on my webpage?

Upvotes: 0

Views: 664

Answers (2)

Salasar
Salasar

Reputation: 136

The answer to my question:

<div ng-repeat="arr in extension.providers" ng-init="topIndex = $index">
     <div id="pos{{topIndex.toString() + $index.toString()}}"
          ng-repeat="provider in arr track by provider.id">
     </div>
</div>

As result, I get unique id's like pos00, pos01, pos10, pos11....

Thanks Chrillewoodz and Beyers for their help.

Upvotes: 0

Chrillewoodz
Chrillewoodz

Reputation: 28318

If you are using an ng-repeat to generate the div elements which I'm assuming you can simply use the $index of the loop to generate IDs.

In your case you have nested ng-repeat, so if you want to access the parent $index:

<div ng-repeat="arr in extension.providers">
  <div ng-repeat="provider in arr track by provider.id" id="pos{{$parent.$index}}">
  </div>
</div>

Or you can simply just use $index as demonstrated by this plunkr:

http://plnkr.co/edit/d8YPSHqLYkPtqovGpxbv?p=preview

Upvotes: 3

Related Questions