Fornito un elemento HTML di tipo div
, come impostare il valore del suo id
attributo, che è la concatenazione di una variabile di ambito e una stringa?
Fornito un elemento HTML di tipo div
, come impostare il valore del suo id
attributo, che è la concatenazione di una variabile di ambito e una stringa?
Risposte:
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 id
valore dell'attributo di un div
elemento, 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>
myScopeObject
sia una proprietà di un scope
oggetto esposto utilizzando un controller. Vedere anche docs.angularjs.org/guide/controller . È abbastanza chiaro per te o devo approfondire ulteriormente?
<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?
Questa cosa ha funzionato abbastanza bene per me:
<div id="{{ 'object-' + $index }}"></div>
ng-attr-id
è vantaggioso nello 0% delle situazioni. Non possono essere forniti esempi, perché non ce ne sono.
ng-attr-id
metodo è quello di garantire che l'espressione ng grezzo viene mai resa in un attributo HTML valido (per esempio id
, label
ecc). Questo è quello di fermare qualsiasi utilizzo a valle lettura ng 'junk' (ad esempio, prima di rendering è completo, o dopo un crash js)
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.
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>
ng-attr-id
creare ng-id
..? è sbagliato. Mi chiedo chi lo voti a favore
myScopeObject
viene? Dove lo definirei?