Як встановити атрибут id елемента HTML динамічно за допомогою angularjs (1.x)?


Відповіді:


392

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>

1
Звідки береться myScopeObject? Де я б це визначив?
Ян Аагаард

1
@JanAagaard Припустимо myScopeObject, це властивість scopeоб'єкта, відкритого за допомогою контролера. Дивіться також docs.angularjs.org/guide/controller . Це достатньо зрозуміло для вас чи я буду детальніше розробити?
Тьеррі Маріанна

я зробив ng-attr-id = "{{'Panel' + file.Id}}", але він не генерує для мене id = "Panel12312" :(
Мануель Маестріні

17
Чи не такі дві однакові за поведінкою: <div id="{{ 'object' + index }}">і <div ng-attr-id="{{ 'object' + index }}">? Документи, здається, передують ng-attr-- це допомогти у випадках, коли елемент є чимось нестандартним, як, наприклад, не <div>. Чи читаю я документи правильно?
broc.seib

3
@ broc.seib з використанням nd-attr - це не лише стандарт. Це хороша практика, оскільки інтерпретатор HTML може призначити елемент елементу перед завантаженням кутових. І ng-attr забезпечує присвоєння id елементу лише тоді, коли кутовий завантажується. те саме стосується ng-src у тезі <img>.
Олексій

70

Ця річ спрацювала для мене досить добре:

<div id="{{ 'object-' + $index }}"></div>


Час летить і, мабуть, самий інтуїтивний синтаксис зараз просто працює так, як очікувалося. Я пам'ятаю, що під час перегляду списку були деякі проблеми.
Тьєррі Маріанна

2
Це спрацює правильно у 90% випадків, але іноді ви можете отримати помилки, які важко налагодити. Ви повинні використовувати замість ng-attr-id.
Бакі

ng-attr-idє вигідним у 0% ситуацій. Прикладів не можна надати, оскільки таких немає.
omikes

5
ng-attr-idМетод для того, щоб сировина нг вираз ніколи не виявляється в допустимому атрибута HTML (наприклад id, labelі т.д.). Це потрібно, щоб зупинити будь-яке використання нижче за течією "сміття" (наприклад, перед завершенням рендерингу або після збою js)
Overflew

34

Якщо ви прийшли до цього питання, але пов'язані з новою версією Angular> = 2.0 .

<div [id]="element.id"></div>

2
Це не корисно, питання в контексті AngularJS
btk

8
Я згоден; це стане в нагоді лише тим членам, які вважають його корисним.
SoEzPz

16
Деякі члени все ще натискають на посилання Angularjs, хоча вони шукають кутові посилання. Це трохи заплутано, і помилки й надалі трапляться.
SoEzPz

24

Більш елегантний спосіб я досягти такої поведінки - це просто:

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

Можливість генерувати унікальні ідентифікатори під час руху може бути дуже корисною, коли динамічно додавати такий вміст.


Я думаю, що цей підхід має проблеми. Я ініціалізую кутове прив'язування після завантаження сторінки. Зараз часом div не вдається завантажити належним чином, напевне, це відбувається через зіткнення ідентифікатора різних div.
sumeet

Цікаво. Якщо ви зможете відтворити свою поведінку на прикладі планку, я би радий перевірити це. Чи працює "ng-attr-id =", а просто "id =" не працює?
Cumulo Nimbus

9

Ви можете просто зробити наступне

У вашому js

$scope.id = 0;

У вашому шаблоні

<div id="number-{{$scope.id}}"></div>

який візуалізуватиме

<div id="number-0"></div>

Не варто з’єднувати всередині подвійних фігурних дужок.



0

Якщо ви використовуєте цей синтаксис:

<div ng-attr-id="{{ 'object-' + myScopeObject.index }}"></div>

Кутовий виведе щось на зразок:

 <div ng-id="object-1"></div>

Однак цей синтаксис:

<div id="{{ 'object-' + $index }}"></div>

створить щось на кшталт:

<div id="object-1"></div>

6
Поясніть, що ви намагаєтесь сказати?
Кумар

6
Навіщо ng-attr-idстворювати ng-id..? Це неправильно. Цікаво, хто це схвалює
TJ
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.