CODEWITHSUNDEEP
javascriptangularjsangularjs-ng-repeat
Alex Man
Alex Man

Reputation: 4886

count is not incrementing within ng-repeat

I have created an application in angularjs, here i am having a table which i am trying to put a dynamic id, where the dynamic id is generated within the ng-init in an hyperlink, the application is working fine but the count is not incrementing

can anyone please tell some solution for this

Working Demo

<div ng-app="Test1">
    <div ng-controller="Foo">
      <span ng-repeat="section in sectionData.sections">
       <span ng-repeat="regions in section.regions">
         <span ng-repeat="places in regions.places">
             <a ng-init="count++" href="javascript:void(0);" ng-click="getClick(count)">Click</a>
                <table id="{{count}}" border="1">
                      <tr><td>{{places.placeName}}</td></tr>
                </table>
         </span>
        </span> 
       </span>
    </div>
 </div>

Upvotes: 2

Views: 2028

Answers (5)

Joao Leal
Joao Leal

Reputation: 5542

Does the id need to be an int?

<div ng-app="Test1">
    <div ng-controller="Foo">
      <span ng-repeat="section in sectionData.sections" ng-init="id1 = $index">
       <span ng-repeat="regions in section.regions"  ng-init="id2 = id1 + '-' + $index">
         <span ng-repeat="places in regions.places" ng-init="id3 = id2 + '-' + $index">
             <a href="javascript:void(0);" ng-click="getClick(id3)">Click</a>
                <table id="{{id3}}" border="1">
                      <tr><td>{{places.placeName}}</td></tr>
                </table>
         </span>
        </span> 
       </span>
    </div>
 </div>

Upvotes: 1

laurent
laurent

Reputation: 2620

You can create a directive which keeps track in a closure of the global count and expose the unique id incremented every time the link function runs to the scope.

directive('uniqueId',function(){

    var count=0;

    return {
        scope:{
            uniqueId:'='
        },
        link:function(scope, element, attr){
         count+=1;
        scope.uniqueId=count;
        }
    };
});

and the markup

<a unique-id="places.id" href="javascript:void(0);" ng-click="getClick(places.id)">Click</a>

see this running example

Upvotes: 2

AlexMA
AlexMA

Reputation: 10192

You could always get rid of ng-init="count++" and replace {{count}} with {{getUniqueIndex()}}. In your controller scope you would define a function getUniqueIndex which returns what you need. This has the additional benefit of keeping that logic in the controller where you are probably using it more anyway.

Upvotes: 0

Kalhan.Toress
Kalhan.Toress

Reputation: 21901

<a ng-init="count" href="javascript:void(0);" ng-click="getClick(count)">Click</a>
            <table id="{{count = count+1}}" border="1">
                  <tr><td>{{places.placeName}}</td></tr>
            </table>

try this one not sure

Upvotes: 0

Nitish Kumar
Nitish Kumar

Reputation: 4870

Replace count to $index

            <a href="javascript:void(0);" ng-click="getClick($index)">Click</a>
            <table id="{{$index}}" border="1">
                  <tr><td>{{places.placeName}}</td></tr>
            </table>

Upvotes: 0

Related Questions