Jak używać etykiet wewnątrz pętli z angularjs

Question

Więc jestem wewnątrz ng-repeat tak:

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

Które powinny produkować coś podobnego

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

Jestem nowy angularjs i nie pewny właściwy sposób podejścia (żaden z dokumentów nie używa w ogóle label).

Answer 1

Od ng-repeat zapewnia nowy obiekt zakresu na każdej iteracji, wolę użyciu coś jak

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

Zaletą tej metody jest zagwarantowanie, że nie będzie duplikatu selektora o tym samym identyfikatorze w dokumencie. W przeciwnym razie duplikaty mogłyby łatwo powstać podczas routingu lub animacji.

Answer 2

Właściwe rozwiązanie to Gleno.

$id gwarantuje, że będzie unikalny dla każdego tworzonego zakresu, podczas gdy $index zmienia się z dowolną zmianą licznika kolekcji podkreślającej.

Trzeba dodać właściwość $ index (zero based), który jest dostępny w zakresie, w repeatera

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

W przypadku wielu scenariuszy lepszym rozwiązaniem może być ujęcie zarówno tekstu <input>, jak i etykiety w pojedynczym elemencie <label>. Jest to poprawny kod HTML, działa poprawnie we wszystkich przeglądarkach i ma tę dodatkową zaletę, że jest łatwy w użyciu z danymi hierarchicznymi, ponieważ nie musisz używać zmiennej iteratora:

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