Aaron Yodaiken Aaron Yodaiken - 5 months ago 31
HTML Question

How to use labels inside loops with AngularJS

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

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.