HTML Question
How to use labels inside loops with AngularJS
So I'm inside an
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>
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
Answer Source
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.