Как установить атрибут id элемента HTML динамически с помощью angularjs (1.x)?

Ответ 1

Директива 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>

Ответ 2

Эта вещь работала для меня довольно хорошо:

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

Ответ 3

Более элегантный способ, который я нашел для достижения такого поведения, просто:

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

Для моей реализации я хотел, чтобы каждый элемент ввода в ng-repeat имел уникальный идентификатор, чтобы связать метку с. Итак, для массива объектов, содержащихся внутри myScopeObjects, можно сделать следующее:

<div ng-repeat="object in myScopeObject">
    <input id="{{object.name + 'Checkbox'}}" type="checkbox">
    <label for="{{object.name + 'Checkbox'}}">{{object.name}}</label>
</div>

Возможность генерации уникальных идентификаторов "на лету" может быть очень полезна при динамическом добавлении контента, подобного этому.

Ответ 4

Если вы пришли к этому вопросу, но связаны с более новой версией Angular> = 2.0.

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

Ответ 5

Вы можете просто сделать следующее

В вашем js

$scope.id = 0;

В вашем шаблоне

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

который отобразит

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

Нет необходимости конкатенации внутри двойных фигурных скобок.

Ответ 6

Если вы используете этот синтаксис:

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

Angular сделает что-то вроде:

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

Однако этот синтаксис:

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

будет генерировать что-то вроде:

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

Ответ 7

Просто <input id="field_name_{{$index}}"/>