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


Risposte:


400

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>

1
Da dove myScopeObjectviene? Dove lo definirei?
Jan Aagaard

1
@JanAagaard Supponiamo che myScopeObjectsia una proprietà di un scopeoggetto esposto utilizzando un controller. Vedere anche docs.angularjs.org/guide/controller . È abbastanza chiaro per te o devo approfondire ulteriormente?
Thierry Marianne

ho fatto ng-attr-id = "{{'Panel' + file.Id}}" ma non genera id = "Panel12312" per me :(
Manuel Maestrini

17
I due seguenti comportamenti non sono identici: <div id="{{ 'object' + index }}">e <div ng-attr-id="{{ 'object' + index }}">? I documenti sembrano dire che l'anteprima ng-attr-serve per aiutare nei casi in cui l'elemento è qualcosa di non standard, come non un file <div>. Sto leggendo i documenti, giusto?
broc.seib

4
@ broc.seib usando nd-attr non riguarda solo lo standard. Questa è una buona pratica perché l'interprete HTML può assegnare l'id all'elemento prima che angular venga caricato. E ng-attr assicura di assegnare id all'elemento solo quando angular viene caricato. lo stesso è il caso di ng-src nel tag <img>.
Alex

70

Questa cosa ha funzionato abbastanza bene per me:

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


Il tempo vola e forse la sintassi più intuitiva ora funziona come previsto. Ricordo di aver avuto alcuni problemi durante l'iterazione di un elenco.
Thierry Marianne

2
Questo funzionerà correttamente nel 90% dei casi, ma a volte potresti ricevere errori di cui è difficile eseguire il debug. Dovresti invece usare ng-attr-id.
Baki

ng-attr-idè vantaggioso nello 0% delle situazioni. Non possono essere forniti esempi, perché non ce ne sono.
omikes

5
Il ng-attr-idmetodo è quello di garantire che l'espressione ng grezzo viene mai resa in un attributo HTML valido (per esempio id, labelecc). Questo è quello di fermare qualsiasi utilizzo a valle lettura ng 'junk' (ad esempio, prima di rendering è completo, o dopo un crash js)
overflew

39

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

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

3
Questo non è utile, la domanda è nel contesto di AngularJS
btk

11
Sono d'accordo; sarà utile solo a quei membri che lo trovano utile.
SoEzPz

21
Alcuni membri continuano a fare clic sui collegamenti Angularjs anche se stanno cercando collegamenti Angular. È un po 'confuso e gli errori continueranno a verificarsi.
SoEzPz

24

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.


Penso che questo approccio abbia problemi. Sto inizializzando la rilegatura angolare dopo che la pagina è stata caricata. Ora a volte il div non si carica correttamente, il che immagino sia dovuto allo scontro di id di div diversi.
sumeet

Interessante. Se potessi riprodurre il tuo comportamento in un esempio di plunker, sarei felice di verificarlo. Usare 'ng-attr-id =' funziona e usare solo 'id =' no?
Cumulo Nimbus

9

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.



0

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>

6
Spiega cosa stai cercando di dire?
Kumar

6
Perché dovrebbe ng-attr-idcreare ng-id..? è sbagliato. Mi chiedo chi lo voti a favore
TJ
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.