javaScript(Angular) 获取每个元素的值

Question

我有一个关于获取每个元素的 id 的问题。我有一个 ListView ，当我单击每个元素时，我想获取最后一行的 id('myID')。 我的问题是，每次点击我总是得到相同的 id(39)

这是我的 angularJS 代码:

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

function ctrlGenel($scope) {
    $scope.call = function(){
      var getID = angular.element(document.querySelector('#myID'));
        alert(getID.html());
    }   
};

我的 html 如下所示:

<div ng-app='app' ng-controller='ctrlGenel'>
    <div id='listview' ng-click='call()' class='listview'>
        <h3>Title 1</h3>
        <h4>Açıklama 1</h4>
        <p id='myID'>39</p>
    </div>

    <div id='listview' ng-click='call()' class='listview'>
        <h3>Title 2</h3>
        <h4>Açıklama 1</h4>
        <p id='myID'>40</p>
    </div>

    <div id='listview' ng-click='call()' class='listview'>
        <h3>Title 3</h3>
        <h4>Açıklama 1</h4>
        <p id='myID'>41</p>
    </div>
</div>

这是一个 JSFiddle 演示:http://jsfiddle.net/aldimeola1122/40rx6xwt/

你能帮我一下吗？提前致谢。

Answer 1

试试这个:

您可以使用 ng-click 的 $event 来访问您点击的 dom 元素。您只需在 Controller 中像 $event.currentTarget 一样调用 currentTarget 即可。

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



  function ctrlGenel($scope) {
        $scope.call = function(event){
          var getID = angular.element(event.currentTarget.querySelector('.myClass'));
            alert(getID.html());
        }   
    };

然后在你的html中:

 <div ng-app='app' ng-controller='ctrlGenel'>
    <div id='listview' ng-click='call($event)' class='listview'>
         <h3>Title 1</h3>
         <h4>Açıklama 1</h4>
        <p class='myClass'>39</p>
    </div>

    <div id='listview' ng-click='call($event)' class='listview'>
     <h3>Title 2</h3>
     <h4>Açıklama 1</h4>
    <p  class='myClass'>40</p>
    </div>

    <div id='listview' ng-click='call($event)' class='listview'>
     <h3>Title 3</h3>
     <h4>Açıklama 1</h4>
    <p class='myClass'>41</p>
    </div>
    </div>

请注意，我使用的是类而不是 id