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

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

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

例如，要设置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 ng-attr-id="{{ 'object-' + myScopeObject.index }}"></div>

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

Angular将渲染如下内容：

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

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

但是，此语法：

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

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

将生成如下内容：

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

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

---

您只需执行以下操作即可

在你的js中

$scope.id = 0;

在模板中

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

这将导致

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

---

无需在双花括号内串联。

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

---

只是

myScopeObject来自哪里？我应该在哪里定义它？@JanAagaard让我们假设myScopeObject是使用控制器公开的scope对象的属性。另请参阅。这对您来说够清楚了吗，或者我需要进一步详细说明吗？我做了ng attr id={{'Panel'+file.id}}，但它没有为我生成id=Panel12312：以下两个行为是否相同：和？文档似乎说，在元素是非标准的情况下，比如不是一个元素的情况下，预加ng attr-是有帮助的。我读的文档对吗？@broc.seib使用nd attr不仅仅是关于标准的。这是一个很好的实践，因为HTML解释器可以在加载angular之前为元素分配id。ng attr确保仅在加载angular时才将id分配给元素。tag中的ngsrc也是如此。时间过得飞快，也许最直观的语法现在正如预期的那样工作。我记得在迭代列表时遇到了一些问题。这在90%的情况下都是正确的，但有时可能会出现难以调试的错误。您应该改用ng attr id。ng-attr-id在0%的情况下是有利的。由于没有示例，因此无法提供任何示例。ng attr id方法用于确保原始ng表达式从未在有效的HTML属性（例如id、标签等）中呈现。这是为了停止任何下游使用读取ng“垃圾邮件”，例如在呈现完成之前，或者在js崩溃之后，你想说什么？为什么ng attr id应该创建ng-id。。？那是错误的。我想知道是谁支持这一方法，我认为这一方法存在问题。加载页面后，我正在初始化角度绑定。现在，有时div无法正确加载，我想这是因为不同div的id冲突。如果你能在plunker的例子中重现你的行为，我很乐意去看看。使用'ng attr id='有效而仅仅使用'id='无效吗？这是没有用的，问题是在AngularJSI同意的背景下；它只对那些觉得有用的成员有用。一些成员仍然点击Angularjs链接，即使他们正在搜索角度链接。这有点让人困惑，错误还会继续发生。为什么在指数前面加一美元？我想可能是因为这应该是一个ng重复？没错@Pipo你应该，也许，检查这里：