在ng-repeat angular js中获取html元素

Question

我需要访问在 ng repeat 中创建的 dom 元素，我有这段代码，但我不明白为什么我无法获取该元素。

<div></div>
<ul>
      <li ng-repeat="data in data"">
        {{data}}
      </li>
    </ul>
    <script>
      var thirdListItem = $('ul').find('li').first().text();
        $('div').html(thirdListItem);
    </script>

这里是笨蛋http://plnkr.co/edit/91S2esBo0uHzQHyEBuvj?p=preview

Answer 1

同时使用 AngularJS 和 jQuery 并不是一个好主意。顺便说一句，试试这个快速而肮脏的解决方案：

  $(function(){
      var thirdListItem = $('ul').find('li').first().text();
      $('div').html(thirdListItem);
  });

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

正如有人已经说过的，最好的做法是创建一个custom directive。

Answer 2

对于您的特定情况，请尝试以下解决方案： 它使用 ng-init 将列表项的索引值传递给一个函数，该函数使用该索引使用 jQuery 返回 DOM 元素。输出是控制台。

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

  <ul>
    <li ng-repeat="data in data" ng-init="find($index +1)">
      {{data}}
    </li>
  </ul>

$scope.find = function(i){
       $ele= $('li:nth-child(' + i +')');
       console.log($ele);
  }