html - style - ng-attr-title
Как использовать метки внутри петель с помощью AngularJS (2)
Для многих сценариев лучшим решением может быть <input> текста <input> и меток в один элемент <label> . Это абсолютно корректный HTML, корректно работает во всех браузерах и имеет дополнительное преимущество, заключающееся в простоте использования с иерархическими данными, поскольку вам не нужно использовать переменную итератора:
<li ng-repeat="x in xs">
<label>
Label Text
<input type="text">
</label>
</li>
Итак, я внутри 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 вообще).
Поскольку 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>
Преимущество этого метода заключается в том, что вы гарантируете, что не должны иметь дублирующий селектор с одинаковым идентификатором в документе. В случае маршрутизации или анимации дублирование может легко возникать.
