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

Question

所以我在里面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).

Answer 1

正确的解决方案是Gleno's.

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

Answer 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的重复选择器.在路由或动画时,否则很容易出现重复.

Answer 3

对于许多场景,更好的解决方案可能是将<input>文本和标签文本都包含在单个<label>元素中.这是完全有效的HTML,适用于所有浏览器,并且具有易于使用分层数据的额外好处,因为您不需要使用迭代器变量:

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