Как установить атрибут 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-repeat имел каждый уникальный идентификатор, с которым ассоциируется метка. Таким образом, для массива объектов, содержащихся в 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>

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

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

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

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

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

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