为“DOM操作”中的“ng-repeat”中的每个项目赋予唯一ID

时间:2013-09-24 16:03:45

标签: angularjs angularjs-ng-repeat ng-repeat

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

button(id='anotherID1') Hi

内部相关的角度指令

$('#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'>

的高度

5 个答案:

答案 0 :(得分:5)

首先,如果您使用的是Angular,建议您坚持使用标准的Angular指令进行侦听,而不是恢复为jQuery。因此,不要使用jQuery的on,而是在希望Angular绑定侦听器的HTML事件上使用ng-click属性。

例如:

<强> HTML

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

<强>控制器

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

如果要为ng-repeat创建的每个元素存储唯一ID,请如何使用ID doStuffng-click="doStuff(item.ID)"调用添加参数,并在$scope.doStuff中访问该参数方法。

答案 1 :(得分:3)

id = {{&#39; flowchartWindow&#39; + $ index}}这对我有用

答案 2 :(得分:0)

尝试     按钮(ID = {{&#39; ID&#39; + $索引}})

答案 3 :(得分:0)

适合我。

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

所以我怀疑sushain97是正确的,问题不在于你使用angular(事件绑定除外)的方式。

答案 4 :(得分:-4)

用于动态分配的ID。 $('#ID1').on('click', function() {alert('hi');});的语法稍微改变为

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

完美无缺!