How to use labels inside loops with AngularJS

Question

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

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

Answer 1

The correct solution is Gleno's.

$id is guaranteed to be unique for every created scope, while $index changes with any change to the count of the underlining collection.

You need to add the $index property(zero based) that is available on the scope in the repeater

<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

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.

Answer 3

For many scenarios, a better solution might be to enclose both the <input> and label text in a single <label> element. This is perfectly valid HTML, works properly in all browsers, and has the added benefit of being easy to use with hierarchical data, since you don't need to use the iterator variable:

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