html-如何在Angular循环中使用标签

所以我像这样在label里面:

<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)。

Aaron Yodaiken asked 2020-06-26T19:05:54Z
3个解决方案
39 votes

正确的解决方案是格莱诺的。

对于每个创建的范围,保证$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>
Liviu T. answered 2020-06-26T19:06:41Z
32 votes

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

Gleno answered 2020-06-26T19:06:12Z
12 votes

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

<li ng-repeat="x in xs">
   <label>
       Label Text
       <input type="text">
   </label>
</li>
Robert answered 2020-06-26T19:07:01Z
translate from https://stackoverflow.com:/questions/14663397/how-to-use-labels-inside-loops-with-angularjs