为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'> 的高度

- Sangram Singh

---

只是想了解一下：你的模板引擎是什么？Jade吗？ - Thomas Pons

请使用指令进行DOM操作！jQuery风格的点击处理程序不太符合Angular的风格。 - tymeJV

@Chandermani Angular无法识别通过ID{{$index}}生成的ID1，因此前面的语句没有任何效果。 - Sangram Singh

@SangramSingh -- 那么，你为什么想要使用ID呢？这是否可以通过只使用this的一个实例来解决？ - tymeJV

@tymeJV 不是。我正在进行编辑，以展示用例。 - Sangram Singh

Answer 1

首先，如果您正在使用Angular，建议您坚持使用标准的Angular指令来作为监听器，而不是返回到jQuery。因此，代替jQuery的on，请使用ng-click属性在您想要Angular绑定侦听器的HTML事件上。

例如： HTML:

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

Controller:

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

为了在ng-repeat创建的每个元素中存储唯一的ID，可以通过添加参数到doStuff调用来实现： ng-click="doStuff(item.ID)" 并在$scope.doStuff方法中访问它。

- sushain97

---

对于DOM操作，建议使用指令而不是控制器。$scope.doStuff = function () { //执行操作 }; 是控制器代码的一部分，而我正在尝试通过指令完成它。 - Sangram Singh

Answer 2

id={{'flowchartWindow'+$index}} this works for me

- user2266928

Answer 3

对我来说可行。

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

所以我怀疑sushain97是正确的，问题不在于您使用angular的方式（除了事件绑定之外）。

- user1852503

Answer 4

尝试按钮(id={{'ID'+$index}})

- user2789093

Answer 5

对于动态分配的id，$('#ID1').on('click', function() {alert('hi');}); 的语法会有一些变化。

$('#YourWrapperID').on('click','#id1' , function(){
    alert('hi');
});

完美运行！

- Sangram Singh