it-swarm.com.de

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? 

234

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>
361

Dieses Ding hat für mich ziemlich gut funktioniert:

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

57
Tanveer Shaikh

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.

22
Cumulo Nimbus

Falls Sie zu dieser Frage gekommen sind und sich auf die neuere Angular-Version> = 2.0 beziehen.

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

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.

9
emil.c

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>
1
K Rajesh Kumar

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

1
D. Mohamed