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

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

460028 次浏览
小开
最佳答案

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

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>
小开

我发现实现这种行为的一个更优雅的方法是:

<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是非常有用的。

小开

这个方法对我很有效:

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

小开

如果你使用这个语法:

<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>
小开

您可以简单地执行以下操作

在你的js中

$scope.id = 0;

在模板中

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

它会渲染

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

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

小开

如果你遇到这个问题，但与更新的Angular版本>= 2.0有关。

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

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


提交答案