47

所以我在里面是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）。

4

3 回答 3

40

正确的解决方案是 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>
于 2013-02-02T15:40:10.103 回答
35

由于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 的重复选择器。否则，在路由或制作动画时很容易出现重复。

于 2014-08-09T17:45:30.303 回答
12

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

<li ng-repeat="x in xs">
   <label>
       Label Text
       <input type="text">
   </label>
</li>
于 2014-09-24T16:39:31.430 回答