Как использовать метки внутри петель с помощью AngularJS

Итак, я внутри 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>

Что должно вызывать нечто вроде

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

Я новичок в AngularJS и не уверен в правильном подходе к этому (ни один из документов не использует label вообще).

Ответы

Ответ 1

Так как ng-repeat предоставляет новый объект области видимости на каждой итерации, я предпочитаю использовать что-то вроде

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

Преимущество этого метода заключается в том, что вы гарантируете, что не должны иметь дублирующий селектор с тем же идентификатором в документе. Дубликаты могут легко возникать при маршрутизации или анимации.

Ответ 2

Правильное решение - это Gleno's.

$id гарантированно будет уникальным для каждой созданной области, а $index изменится с любым изменением на счет коллекции подчеркивания.

Вам нужно добавить свойство $index (основанный на нуле), которое доступно в области репитера

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

Ответ 3

Для многих сценариев лучшим решением может быть включение текста <input> и меток в один элемент <label>. Это абсолютно корректный HTML, корректно работает во всех браузерах и имеет дополнительное преимущество, заключающееся в простоте использования с иерархическими данными, поскольку вам не нужно использовать переменную итератора:

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