如何使用angularjs(1.x)动态设置HTML元素的id属性？

Question

提供了一个类型的HTML元素div,如何设置其id属性的值,这是范围变量和字符串的串联？

Answer 1

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>

Answer 2

这件事对我很有用:

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

Answer 3

如果您遇到此问题但与较新的Angular版本> = 2.0有关.

<div [id]="element.id"></div>

Answer 4

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

<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非常有用.

Answer 5

你可以简单地做以下事情

在你的js

$scope.id = 0;

在您的模板中

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

这将呈现

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

没有必要在双花括号内连接.

Answer 6

只是 <input id="field_name_{{$index}}" />