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

Наданий 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>

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

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

Якщо ви прийшли до цього питання, але пов'язані з новою версією 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>

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

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

У вашому js

$scope.id = 0;

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

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

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

<div id="number-0"></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>