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

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

227
angularjs angularjs-scope javascript string-concatenation

6 ответов

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

это работает для меня очень хорошо:

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

54

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

<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

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

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

вы могли бы просто сделать следующее

в вашем js

$scope.id = 0;

В шаблоне 

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

чему

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

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

9

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

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

угловой будет отображать что-то вроде:

 <div ng-id="object-1"></div>
синтаксис: 
<div id="{{ 'object-' + $index }}"></div>

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

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