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

【问题标题】：How to set the id attribute of a HTML element dynamically with angularjs (1.x)?如何使用 angularjs (1.x) 动态设置 HTML 元素的 id 属性？
【发布时间】：2014-07-02 12:42:34
【问题描述】：

提供了一个div类型的HTML元素，如何设置其id属性的值，即作用域变量和字符串的拼接？

【问题讨论】：

标签： javascript angularjs angularjs-scope string-concatenation

【解决方案1】：

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>

【讨论】：

myScopeObject 来自哪里？我会在哪里定义它？
@JanAagaard 让我们假设myScopeObject 是使用控制器公开的scope 对象的属性。另请参阅docs.angularjs.org/guide/controller。这对你来说够清楚了吗，还是我应该进一步详细说明？
我做了 ng-attr-id="{{ 'Panel' + file.Id }}" 但它没有为我生成 id="Panel12312" :(
以下两个行为是否相同：<div id="{{ 'object' + index }}"> 和 <div ng-attr-id="{{ 'object' + index }}">？文档似乎说在前面添加ng-attr- 是为了帮助解决元素是非标准的情况，比如不是<div>。我读的文档对吗？
@broc.seib 使用 nd-attr 不仅仅是标准。这是一个很好的做法，因为 HTML 解释器可以在加载 angular 之前将 id 分配给元素。并且 ng-attr 确保仅在加载 angular 时将 id 分配给元素。标签中的 ng-src 也是如此。

【解决方案2】：

这件事对我很有效：

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

【讨论】：

时间过得真快，也许最直观的语法现在可以按预期工作。我记得在迭代列表时遇到了一些问题。
这在 90% 的情况下都可以正常工作，但有时您可能会遇到难以调试的错误。您应该改用 ng-attr-id。
ng-attr-id 在 0% 的情况下是有利的。无法提供示例，因为没有。
ng-attr-id 方法是为了确保原始 ng 表达式永远不会呈现在有效的 HTML 属性中（例如 id、label 等）。这是为了阻止任何下游使用读取 ng 'junk'（例如，在渲染完成之前，或者在 js 崩溃之后）

【解决方案3】：

如果您遇到这个问题但与较新的 Angular 版本 >= 2.0 相关。

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

【讨论】：

那没用，问题是在AngularJS的上下文中
我同意；它只会对那些认为有用的成员有用。
有些成员即使在搜索 Angular 链接，仍然会点击 Angularjs 链接。这有点令人困惑，错误将继续发生。

【解决方案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 非常有用。

【讨论】：

我认为这种方法存在问题。加载页面后，我正在初始化角度绑定。现在有时 div 无法正确加载，我猜这是因为不同 div 的 id 冲突。
有趣。如果您可以在一个 plunker 示例中重现您的行为，我将很乐意检查一下。使用 'ng-attr-id=' 是否有效而仅使用 'id=' 无效？

【解决方案5】：

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

在你的 js 中

$scope.id = 0;

在你的模板中

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

将渲染

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

不必在双花括号内连接。

【讨论】：

【解决方案6】：

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

【讨论】：

为什么要在 index 前面加上 $？
我认为这可能是因为那应该在 ng-repeat 中？
精确。 @Pipo 你应该，可能，在这里查看docs.angularjs.org/api/ng/directive/ngRepeat :)

【解决方案7】：

如果你使用这种语法：

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

【讨论】：

解释一下你想说什么？
为什么要ng-attr-id 创建ng-id..？这是错误的。我想知道谁赞成这个