如何在AngularJS的循环中使用标签 [英] How to use labels inside loops with AngularJS

问题描述

所以我在 ng-repeat 里面，像这样：

So I'm inside an ng-repeat like this:

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

其中应该产生类似于

Which should produce something like

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

I'm new to AngularJS and not sure of the right way to approach this (none of the docs use label at all).

推荐答案

由于 ng-repeat 在每次迭代中都提供了一个新的作用域对象，所以我更喜欢使用类似于

Since ng-repeat provides a new scope object on each iteration, I prefer using something like

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

这种方法的优点是您可以保证不会在文件。在路由或动画制作时，重复会很容易出现。

The advantage of this method is that you are guranteed not to have a duplicate selector with same id on the document. Duplicates could otherwise easily arise when routing or animating.

这篇关于如何在AngularJS的循环中使用标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！