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

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

button(id='anotherID1') Hi

inside relevant Angular Directive

内部相关的角度指令

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

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

I am performing DOM manipulations for which i need unique ID for ng-repeat elements. Please also suggest if DOM manipulation can be performed in any other way too.

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

Edit: @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>

// Directive Code:- to increase height of <div class = 'ques'>

//指令代码: - 增加

的高度

5 个解决方案

#1

First of all, if you are using Angular, it is recommended that you stick with standard Angular directives for listeners rather than reverting to jQuery. So instead of jQuery's on, use the ng-click attribute on HTML events you want Angular to bind a listener to.

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

For example:

HTML:

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

Controller:

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

For storing a unique ID with each element created by ng-repeat, how about adding a parameter to the doStuff call with the ID: ng-click="doStuff(item.ID)" and access it in the $scope.doStuff method.

为了存储由ng-repeat创建的每个元素的唯一ID,如何使用ID:ng-click =“doStuff(item.ID)”向doStuff调用添加参数,并在$ scope.doStuff方法中访问它。

#2

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

id = {{'flowchartWindow'+ $ index}}这对我有用

#3

Try button(id={{'ID'+$index}})

#4

works for me.

适合我。

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

so I suspect that sushain97 is right and the problem is not in the way you use angular (event binding aside).

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

#5

-4

For dynamically allocated id. the syntax of $('#ID1').on('click', function() {alert('hi');}); changes a bit to

对于动态分配的id。 $('#ID1')。on('click',function(){alert('hi');})的语法;改变了一点

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

Works perfectly!

#1