Como definir o atributo id de um elemento HTML dinamicamente com angularjs (1.x)?

Fornecido um elemento HTML do tipo div, como definir o valor de seu idatributo, que é a concatenação de uma variável de escopo e uma string?

ngAttr diretiva pode ser totalmente útil aqui, conforme introduzido na documentação oficial

https://docs.angularjs.org/guide/interpolation#-ngattr-for-binding-to-arbitrary-attributes

Por exemplo, para definir o idvalor do atributo de um divelemento, para que ele contenha um índice, um fragmento de visualização pode conter

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

que seria interpolado para

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

Essa coisa funcionou muito bem para mim:

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

Caso você tenha chegado a essa pergunta, mas esteja relacionado à versão Angular mais recente> = 2.0 .

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

Uma maneira mais elegante que encontrei para atingir esse comportamento é simplesmente:

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

Para minha implementação, eu queria que cada elemento de entrada em um ng-repeat para cada um tivesse um ID exclusivo para associar o rótulo. Portanto, para uma matriz de objetos contidos no myScopeObjects, é possível fazer o seguinte:

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

Ser capaz de gerar IDs únicos em tempo real pode ser bastante útil ao adicionar dinamicamente conteúdo como este.

Você poderia simplesmente fazer o seguinte

Em seus js

$scope.id = 0;

No seu modelo

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

o que renderizará

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

Não é necessário concatenar dentro de colchetes duplos.

Somente <input id="field_name_{{$index}}" />

Se você usar esta sintaxe:

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

Angular renderizará algo como:

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

No entanto, esta sintaxe:

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

irá gerar algo como:

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