How to find index in AngularJS through directive?

Question

I have tried to get index like this

this is my html

  <div ng-repeat="item in items" ng-click="findindex($index)"></div>

this is controller

 $sceop.findinedx=function(index)
{
    alert(index);
}

here i am able to get index value.but i want to get index value through directive

this is my html

 <div ng-repeat="item in items" my-directive></div>

this is my directive

   app.directive('myDirective',function()
   {
        return function(scope, elem, attrs,$index) 
        {
              elem.bind('click', function($index)
              {
                   alert($index);
              });
        });
   };

here i am not able to get index..so how to get index value in directive?

You should really consider using an isolated scope for something like this. Having the directive rely on $index is bad practice. See my answer for elaboration. — Brian Genisio
– Brian Genisio, Commented Nov 26, 2013 at 11:17

Brian Genisio · Accepted Answer · 2013-11-26 11:15:44Z

I have an app that looks like this, and it works. No need to bind to $parent. Everything is in your scope because the directive hasn't defined anything other than the default scope:

http://codepen.io/BrianGenisio/pen/yFbuc

var App = angular.module('App', []);

App.controller('TestCtrl', function($scope) {
  $scope.items = ['a', 'b', 'c'];
});

App.directive('myDirective',function() {
  return function(scope, elem, attrs,$index) {
    elem.html(scope.item)

    elem.bind('click', function($index) {
      alert(scope.$index);
    });
  };
});

BUT, YOU SHOULD RECONSIDER

Writing directives this way is bad practice. One of the key concepts of directives is that they should encapsulate behavior. You are breaking encapsulation by having the directive peek into the $index like that. It requires that it be inside a repeater, which also breaks encapsulation.

Instead, consider using an isolated scope and passing the values in via parameters instead.

The HTML would look like this:

<div ng-repeat="item in items" my-directive="item" index="$index"></div>

And then you define the directive a bit differently, using an isolated scope:

App.directive('myDirective',function() {
  return {
    scope: {
     index: '=',
     item: '=myDirective'
    },
    link: function(scope, elem, attrs,$index) {
      elem.html(scope.item)

      elem.bind('click', function($index) {
        alert(scope.index);
      });
    }
  };
});

Working Codepen

Good luck!

isherwood · Accepted Answer · 2015-01-26 19:36:50Z

5

Each of the ngRepeat iterations has a different scope. Use scope to access the respective indices:

elem.bind('click', function($index){
    alert(scope.$index);
});

Fiddle

edited Jan 26, 2015 at 19:36

isherwood

61.4k16 gold badges122 silver badges173 bronze badges

answered Nov 26, 2013 at 10:31

AlwaysALearner

43.9k9 gold badges98 silver badges78 bronze badges

3 Comments

silvesterprabu Over a year ago

thanks for your answer...but i am not able to get parent index...i have tried like this scope.$parent.$index but this is not working ....

AlwaysALearner Over a year ago

@silvesterprabu You would be able to access $parent.$index only if you have nested ng-repeats.

AlwaysALearner Over a year ago

@silvesterprabu I have added a fiddle. May be you can update your question to include HTML with both the repeats.

David Arul · Accepted Answer · 2017-11-13 06:20:52Z

0

Use in the directive attribute "let ind=index"

For example :

<ul>
    <li *ngFor="let i of items; let ind= index">
        {{i}}
        <span (click)="removeItem()" class="remove_link">X</span>
    </li>
</ul>

answered Nov 13, 2017 at 6:20

David Arul

1712 silver badges4 bronze badges

Collectives™ on Stack Overflow

How to find index in AngularJS through directive?

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related