在前端开发中，我们经常需要在 DOM 元素中使用动态的 ID，同时也可能需要使用 AngularJS 的 ng-repeat 指令来生成多个相同的元素。本文将介绍如何在这两种情况下使用动态 ID。
使用 ng-repeat 生成动态 ID
在使用 ng-repeat 指令时，我们可能需要给每个生成的元素赋予一个唯一的 ID 值。这可以通过 $index 属性和字符串拼接实现。例如：
<div ng-repeat="item in items">
<button id="button-{{$index}}">{{item.name}}</button>
</div>在上面的示例中，我们使用了 $index 属性来获取当前元素在循环中的索引，并将其与字符串 "button-" 拼接成一个唯一的 ID 值。
动态修改 ID
有时候，我们需要动态地修改一个已经存在的元素的 ID 值，例如当用户进行某些操作后，需要更新元素的 ID 值。这可以使用 JavaScript 来实现。例如：
<button id="my-button"></button>
<script>
var button = document.getElementById('my-button');
button.setAttribute('id', 'new-id');
</script>在上面的示例中，我们首先获取了 ID 为 "my-button" 的按钮元素，然后使用 setAttribute 方法将其 ID 修改为 "new-id"。
但是，如果我们使用 AngularJS，应该避免直接操作 DOM，而是应该使用它提供的数据绑定功能来修改元素的 ID 值。
-- -------------------- ---- -------
---- -------------- -----------------------------
------- ---------------------------
------- ---------------------------- -----------
------
--------
--- --- - ----------------------- ----
------------------------------ ---------------- -
--------------- - ------------
--------------- - ---------- -
--------------- - ---------
--
---
---------在上面的示例中，我们使用 AngularJS 的数据绑定功能来将按钮的 ID 绑定到 $scope.buttonId 变量。当用户点击 "Change ID" 按钮时，我们调用 changeId 方法来更新 $scope.buttonId 的值，从而动态地修改按钮的 ID 值。
总结
本文介绍了如何在 ng-repeat 中使用动态 ID，并演示了如何动态修改一个已经存在的元素的 ID 值。在实际开发中，请注意避免直接操作 DOM，而是应该使用 AngularJS 提供的数据绑定功能来更新元素的属性值。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/25869