클릭 요소의 인덱스 가져 오기

Question

클릭 된 요소의 인덱스를 가져 오려고하지만 콘솔에 -1이 계속 표시됩니다.

<div ng-app='app' ng-controller='mainCtrl'> 
    <div app-click=""> 
    <div ng-repeat="json in myJson"> 
     <li>{{json}}</li> 
    </div> 
    </div> 
</div> 

JS :

.directive('appClick', function() { 
    return { 
    restrict: 'A', 
    scope: true, 
    controller: function($scope, $element) { 
     $element.bind("click",function(e){ 
      var index = Array.prototype.indexOf.call($element.children(), e.target); 
      console.log(index); 
     }); 
    } 
    } 
}); 

JSFiddle Demo

Answer 1

다른 옵션은 지수에게

<div ng-app='app' ng-controller='mainCtrl'> 
    <div app-click=""> 
    <div ng-repeat="json in myJson"> 
     <li data-index="{{$index}}">{{json}}</li> 
    </div> 
    </div> 
</div> 

을 설정하고 클릭으로

e.target.dataset.index 

Answer 2

e.target 반환 리튬 요소, $ element.children (나는 nodelist

HTML에서 indexOf를 얻을 수 Array.prototype을 사용하고 있습니다) return div

var index = Array.prototype.indexOf.call($element.find("li"), e.target); 

angular.module('app', []).controller('mainCtrl', function($scope) { 
 
    $scope.myJson = ["mayank1", "mayank2", "mayank3", "mayank4", "mayank5", "mayank6", "mayank7", "mayank8", "mayank9"] 
 
}) 
 

 
.directive('appClick', function() { 
 
    return { 
 
    restrict: 'A', 
 
    scope: true, 
 
    controller: function($scope, $element) { 
 
     $element.bind("click",function(e){ 
 
     \t \t var index = Array.prototype.indexOf.call($element.find("li"), e.target); 
 
      console.log(index); 
 
     }); 
 
    } 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.20/angular.min.js"></script> 
 
<div ng-app='app' ng-controller='mainCtrl'> 
 
    <div app-click=""> 
 
    <div ng-repeat="json in myJson"> 
 
     <li>{{json}}</li> 
 
    </div> 
 
    </div> 
 
</div>

Answer 3

당신이 뭘 하려는지에 정교한 : li
이 코드를 시도하지리스트를 이용? 그것이 당신이 그것을 디자인 한 방법을 보는 그것을 달성하는 더 나은 방법이 있다는 것은 거의 확실합니다.