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

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.

How to use labels inside loops with AngularJS

Sign up