如何使用angularjsdynamic设置HTML元素的id属性？

提供了一个divtypes的HTML元素，如何设置它的id属性的值，这是一个范围variables和一个string的连接？

Answer 1

ngAttr指令在这里完全可以ngAttr帮助，正如在官方文档中介绍的那样

https://docs.angularjs.org/guide/directive#-ngattr-attribute-bindings
更新 ：文档已移至： https ： //docs.angularjs.org/guide/interpolation#-ngattr-for-binding-to-arbitrary-attributes

例如，要设置一个div元素的id属性值，以便它包含一个索引，一个视图片段可能包含

 <div ng-attr-id="{{ 'object-' + myScopeObject.index }}"></div> 

这将插入到

 <div id="object-1"></div> 

Answer 2

这件事对我很好：

<div id="{{ 'object-' + $index }}"></div>

Answer 3

我发现实现这种行为的更优雅的方式很简单：

 <div id="{{ 'object-' + myScopeObject.index }}"></div> 

对于我的实现，我希望ng-repeat中的每个input元素都有一个唯一的id来关联标签。 因此，对于包含在myScopeObjects中的对象数组，可以这样做：

 <div ng-repeat="object in myScopeObject"> <input id="{{object.name + 'Checkbox'}}" type="checkbox"> <label for="{{object.name + 'Checkbox'}}">{{object.name}}</label> </div> 

在dynamic添加这样的内容时，能够即时生成唯一标识符非常有用。

Answer 4

你可以简单地做下面的事情

在你的js

 $scope.id = 0; 

在你的模板中

 <div id="number-{{$scope.id}}"></div> 

这将呈现

 <div id="number-0"></div> 

没有必要连接双花括号内。

Answer 5

如果你使用这个语法：

 <div ng-attr-id="{{ 'object-' + myScopeObject.index }}"></div> 

Angular会呈现如下内容：

  <div ng-id="object-1"></div> 

但是这个语法：

 <div id="{{ 'object-' + $index }}"></div> 

会产生如下的东西：

 <div id="object-1"></div>