Come impostare dinamicamente l'attributo id di un elemento HTML con angularjs (1.x)?

Fornito un elemento HTML di tipo div, come impostare il valore del suo idattributo, che è la concatenazione di una variabile di ambito e una stringa?

ngAttr la direttiva può essere totalmente di aiuto qui, come introdotto nella documentazione ufficiale

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

Ad esempio, per impostare il idvalore dell'attributo di un divelemento, in modo che contenga un indice, potrebbe contenere un frammento di vista

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

che verrebbe interpolato a

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

Questa cosa ha funzionato abbastanza bene per me:

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

Nel caso in cui sei arrivato a questa domanda ma relativa alla versione più recente di Angular> = 2.0 .

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

Un modo più elegante che ho trovato per ottenere questo comportamento è semplicemente:

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

Per la mia implementazione volevo che ogni elemento di input in un ng-repeat avesse un ID univoco a cui associare l'etichetta. Quindi per un array di oggetti contenuti all'interno di myScopeObjects si potrebbe fare questo:

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

Essere in grado di generare ID univoci al volo può essere molto utile quando si aggiungono dinamicamente contenuti come questo.

Potresti semplicemente fare quanto segue

Nel tuo js

$scope.id = 0;

Nel tuo modello

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

che renderà

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

Non è necessario concatenare all'interno di doppie parentesi graffe.

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

Se usi questa sintassi:

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

Angular renderà qualcosa come:

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

Tuttavia questa sintassi:

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

genererà qualcosa come:

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