如何在 AngularJS 的循环中使用标签

Posted 2023-03-05

【中文标题】如何在 AngularJS 的循环中使用标签

【英文标题】：How to use labels inside loops with AngularJS

【发布时间】：2013-01-17 18:35:33

【问题描述】：

所以我在这样的ng-repeat 内：

<li ng-repeat="x in xs">
    <form>
       <label for="UNIQUELABEL">name</label>
       <input  id="UNIQUELABEL">
       <label for="ANOTHERUNIQUELABEL">name2</label>
       <input  id="ANOTHERUNIQUELABEL">
    </form>
</li>

应该产生类似的东西

<li>
    <form>
       <label for="UNIQUELABEL1">name</label>
       <input  id="UNIQUELABEL1">
       <label for="ANOTHERUNIQUELABEL1">name2</label>
       <input  id="ANOTHERUNIQUELABEL1">
    </form>
</li>
<li>
    <form>
       <label for="UNIQUELABEL2">name</label>
       <input  id="UNIQUELABEL2">
       <label for="ANOTHERUNIQUELABEL2">name2</label>
       <input  id="ANOTHERUNIQUELABEL2">
    </form>
</li>
...

我是 AngularJS 的新手，不确定处理这个问题的正确方法（没有文档使用 label）。

【参考方案1】：

正确的解决方案是 Gleno 的。

$id 保证对于每个创建的范围都是唯一的，而$index 会随着下划线集合计数的任何变化而变化。

您需要在中继器的范围内添加 $index 属性（从零开始）

<li ng-repeat="x in xs">
    <form>
       <label for="UNIQUELABEL$index+1">name</label>
       <input  id="UNIQUELABEL$index+1">
       <label for="ANOTHERUNIQUELABEL$index+1">name2</label>
       <input  id="ANOTHERUNIQUELABEL$index+1">
    </form>
</li>

【参考方案2】：

由于ng-repeat 在每次迭代中都提供了一个新的范围对象，我更喜欢使用类似的东西

<li ng-repeat="x in xs">
    <form>
       <label for="UNIQUELABEL::$id_1">name</label>
       <input  id="UNIQUELABEL::$id_1">
       <label for="UNIQUELABEL::$id_2">name2</label>
       <input  id="UNIQUELABEL::$id_2">
    </form>
</li>

这种方法的优点是保证您不会在文档上出现具有相同 id 的重复选择器。否则，在路由或制作动画时很容易出现重复。

【讨论】：

这样更好。它适用于没有 ng-repeat 但您需要确保全局唯一 ID 的其他用例。请记住在您所在的角度范围内保持 UNIQUELABEL.._1 部分的唯一性。

同意这比接受的答案更好。公认的答案是有缺陷的，如果在元素指令中使用了该 sn-p 并且该指令在页面上多次使用，您最终会得到具有相同 id 的元素！

我认为应该使用 $index 而不是 $id。 $id 对于每个控件都是唯一的，而不是迭代中的每个项目。

@GeekyMonkey 你完全错了。首先 ng-repeat 创建具有唯一 $id 值的自己的范围，所以你的前提是错误的。但是如果我们确实用 $index 替换了 $id，当与 ng-animation、ng-if、ng-show 和其他可见性控制方法结合使用时，它可能会创建无效状态，因为 Angular 经常将文档片段创建为克隆，你最终可能会得到一个包含两个具有相同 id 的标签的文档。

使用一次性绑定会减少$watchers的数量，所以使用::$id

【参考方案3】：

对于许多情况，更好的解决方案可能是将<input> 和标签文本包含在单个<label> 元素中。这是完全有效的 html，在所有浏览器中都能正常工作，并且具有易于使用分层数据的额外好处，因为您不需要使用迭代器变量：

<li ng-repeat="x in xs">
   <label>
       Label Text
       <input type="text">
   </label>
</li>