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>

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





angularjs