it-swarm.com.ru

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

Предоставил HTML-элемент типа div, как установить значение его атрибута id, который является объединением переменной области видимости и строки?

245
Thierry Marianne

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

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

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

57
Tanveer Shaikh

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

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

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

22
Cumulo Nimbus

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

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

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

В твоем JS

$scope.id = 0;

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

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

который будет оказывать

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

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

9
emil.c

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

<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>
1
K Rajesh Kumar

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

1
D. Mohamed