Наданий HTML тип елемента div
, як встановити значення його id
атрибута, що є об'єднанням змінної області та рядка?
Наданий HTML тип елемента div
, як встановити значення його id
атрибута, що є об'єднанням змінної області та рядка?
Відповіді:
ngAttr
Директива може повністю допомогти тут, як це внесено в офіційну документацію
https://docs.angularjs.org/guide/interpolation#-ngattr-for-binding-to-arbitrary-attributes
Наприклад, для встановлення id
значення атрибута div
елемента, щоб він містив індекс, може містити фрагмент подання
<div ng-attr-id="{{ 'object-' + myScopeObject.index }}"></div>
який би отримав інтерполяцію
<div id="object-1"></div>
myScopeObject
, це властивість scope
об'єкта, відкритого за допомогою контролера. Дивіться також docs.angularjs.org/guide/controller . Це достатньо зрозуміло для вас чи я буду детальніше розробити?
<div id="{{ 'object' + index }}">
і <div ng-attr-id="{{ 'object' + index }}">
? Документи, здається, передують ng-attr-
- це допомогти у випадках, коли елемент є чимось нестандартним, як, наприклад, не <div>
. Чи читаю я документи правильно?
Ця річ спрацювала для мене досить добре:
<div id="{{ 'object-' + $index }}"></div>
ng-attr-id
є вигідним у 0% ситуацій. Прикладів не можна надати, оскільки таких немає.
ng-attr-id
Метод для того, щоб сировина нг вираз ніколи не виявляється в допустимому атрибута HTML (наприклад id
, label
і т.д.). Це потрібно, щоб зупинити будь-яке використання нижче за течією "сміття" (наприклад, перед завершенням рендерингу або після збою js)
Якщо ви прийшли до цього питання, але пов'язані з новою версією Angular> = 2.0 .
<div [id]="element.id"></div>
Більш елегантний спосіб я досягти такої поведінки - це просто:
<div id="{{ 'object-' + myScopeObject.index }}"></div>
Для моєї реалізації я хотів, щоб кожен вхідний елемент у ng-повторі до кожного мав унікальний ідентифікатор, з яким асоціювати мітку. Отже, для масиву об'єктів, що містяться всередині myScopeObjects, можна зробити це:
<div ng-repeat="object in myScopeObject">
<input id="{{object.name + 'Checkbox'}}" type="checkbox">
<label for="{{object.name + 'Checkbox'}}">{{object.name}}</label>
</div>
Можливість генерувати унікальні ідентифікатори під час руху може бути дуже корисною, коли динамічно додавати такий вміст.
Просто <input id="field_name_{{$index}}" />
Якщо ви використовуєте цей синтаксис:
<div ng-attr-id="{{ 'object-' + myScopeObject.index }}"></div>
Кутовий виведе щось на зразок:
<div ng-id="object-1"></div>
Однак цей синтаксис:
<div id="{{ 'object-' + $index }}"></div>
створить щось на кшталт:
<div id="object-1"></div>
ng-attr-id
створювати ng-id
..? Це неправильно. Цікаво, хто це схвалює
myScopeObject
? Де я б це визначив?