Wie setze ich das id-Attribut eines HTML-Elements dynamisch mit anglejs (1.x)?
Wenn ein HTML-Element vom Typ div bereitgestellt wird, wie wird der Wert seines id-Attributs festgelegt. Welches ist die Verkettung einer Bereichsvariablen und einer Zeichenfolge?
Die ngAttr-Direktive kann hier völlig hilfreich sein, wie in der offiziellen Dokumentation beschrieben
https://docs.angularjs.org/guide/interpolation#-ngattr-for-binding-to-arbitrary-attributes
Um beispielsweise den Attributwert id eines div-Elements so festzulegen, dass es einen Index enthält, kann ein Ansichtsfragment enthalten
<div ng-attr-id="{{ 'object-' + myScopeObject.index }}"></div>
was würde interpoliert werden
<div id="object-1"></div>
Dieses Ding hat für mich ziemlich gut funktioniert:
<div id="{{ 'object-' + $index }}"></div>
Eine elegantere Methode, um dieses Verhalten zu erreichen, ist einfach:
<div id="{{ 'object-' + myScopeObject.index }}"></div>
Für meine Implementierung wollte ich, dass jedes Eingabeelement in einem Wiederholungsreport eine eindeutige ID hat, um das Label zu verknüpfen. Für ein Array von Objekten in myScopeObjects könnte man folgendes tun:
<div ng-repeat="object in myScopeObject">
<input id="{{object.name + 'Checkbox'}}" type="checkbox">
<label for="{{object.name + 'Checkbox'}}">{{object.name}}</label>
</div>
Die Möglichkeit, spontan eindeutige IDs zu generieren, kann beim dynamischen Hinzufügen von Inhalten wie diesem sehr nützlich sein.
Falls Sie zu dieser Frage gekommen sind und sich auf die neuere Angular-Version> = 2.0 beziehen.
<div [id]="element.id"></div>
Sie können einfach Folgendes tun
In deinen js
$scope.id = 0;
In deiner Vorlage
<div id="number-{{$scope.id}}"></div>
was wird rendern
<div id="number-0"></div>
Es ist nicht notwendig, doppelte geschweifte Klammern zu verketten.
Wenn Sie diese Syntax verwenden:
<div ng-attr-id="{{ 'object-' + myScopeObject.index }}"></div>
Angular wird so etwas darstellen:
<div ng-id="object-1"></div>
Diese Syntax jedoch:
<div id="{{ 'object-' + $index }}"></div>
erzeugt so etwas wie:
<div id="object-1"></div>
Nur <input id="field_name_{{$index}}" />