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>

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

3 个答案: