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

所以我在这样一个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

由于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的重复select器。 当路由或animation时，重复可能会很容易出现。

Answer 2

正确的解决scheme是格莱诺的。

$id保证对于每个创build的范围都是唯一的，而$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 3

对于很多场景，更好的解决scheme可能是将<input>和label文本都放在一个<label>元素中。 这是完全有效的HTML，在所有浏览器中都能正常工作，并且由于不需要使用迭代器variables，因此可以方便地使用分层数据：

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