提供了类型为div
的HTML元素,如何设置其id
属性的值,该属性是范围变量和字符串的串联?
答案 0 :(得分:372)
ngAttr
指令在这里完全有用,正如官方文档中所介绍的那样
https://docs.angularjs.org/guide/interpolation#-ngattr-for-binding-to-arbitrary-attributes
例如,要设置id
元素的div
属性值,使其包含索引,视图片段可能包含
<div ng-attr-id="{{ 'object-' + myScopeObject.index }}"></div>
将被内插到
<div id="object-1"></div>
答案 1 :(得分:60)
这件事对我很有用:
<div id="{{ 'object-' + $index }}"></div>
答案 2 :(得分:22)
我发现实现这种行为的一种更优雅的方式就是:
<div id="{{ 'object-' + myScopeObject.index }}"></div>
对于我的实现,我希望ng-repeat中的每个输入元素都有一个唯一的ID来关联标签。因此,对于myScopeObjects中包含的对象数组,可以执行以下操作:
<div ng-repeat="object in myScopeObject">
<input id="{{object.name + 'Checkbox'}}" type="checkbox">
<label for="{{object.name + 'Checkbox'}}">{{object.name}}</label>
</div>
在动态添加这样的内容时,能够动态生成唯一ID非常有用。
答案 3 :(得分:19)
如果您遇到此问题但与较新的 Angular版本&gt; = 2.0 相关。
<div [id]="element.id"></div>
答案 4 :(得分:9)
您可以简单地执行以下操作
在你的js中
$scope.id = 0;
在您的模板中
<div id="number-{{$scope.id}}"></div>
将呈现
<div id="number-0"></div>
没有必要在双花括号内连接。
答案 5 :(得分:2)
<input id="field_name_{{$index}}" />
答案 6 :(得分:1)
如果您使用以下语法:
<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>