angularjs - 为 `ng-repeat` 中的每个项目提供唯一 id 以进行 DOM 操作

Question

.div(ng-repeat='item in items') 
   button(id='ID{{$index}}') No Hi

button(id='anotherID1') Hi

在相关的 Angular 指令中

$('#ID1').on('click', function() {alert('hi');});  // does not work 

$('#anotherID1').on('click', function() {alert('hi');}); // works

我正在执行 DOM 操作，我需要 ng-repeat 元素的唯一 ID。还请建议是否也可以以任何其他方式执行 DOM 操作。

编辑:@tymeJV:-

 style.
  .ques {
    height: 50px;
    overflow:hidden;
  }



<div ng-repeat='item in items'>
    <div class='ques'> {{item.ques}}
    </div>
    <button id='ID{{$index}}'> No Hi </button>
</div>

//指令代码:- 增加 <div class = 'ques'> 的高度

Answer 1

首先，如果您使用 Angular，建议您坚持使用标准的 Angular 监听器指令，而不是恢复为 jQuery。所以代替 jQuery 的 on , 使用 ng-click您希望 Angular 将监听器绑定(bind)到的 HTML 事件的属性。

例如:

HTML :

<button ng-click="doStuff()">
</button>

Controller :

$scope.doStuff = function () {
    //perform action
};

用于存储由 ng-repeat 创建的每个元素的唯一 ID ，如何在 doStuff 中添加一个参数？调用 ID:ng-click="doStuff(item.ID)"并在 $scope.doStuff 中访问它方法。