Wie setze ich das id-Attribut eines HTML-Elements dynamisch mit anglejs (1.x)?

Vorausgesetzt , ein HTML - Element des Typs div, wie man den Wert seines einzustellen idAttribut, das die Verkettung eines Umfang Variablen und eine Zeichenfolge ist?

ngAttr Die Richtlinie kann hier sehr hilfreich sein, wie in der offiziellen Dokumentation beschrieben

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

Um beispielsweise den idAttributwert eines divElements so festzulegen, dass es einen Index enthält, kann ein Ansichtsfragment enthalten

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

das würde interpoliert werden

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

Dieses Ding hat bei mir ziemlich gut funktioniert:

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

Falls Sie zu dieser Frage gekommen sind, sich aber auf eine neuere Angular-Version> = 2.0 beziehen .

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

Ein eleganterer Weg, dieses Verhalten zu erreichen, ist einfach:

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

Für meine Implementierung wollte ich, dass jedes Eingabeelement in einer ng-Wiederholung eine eindeutige ID hat, mit der das Label verknüpft werden kann. Für ein Array von Objekten in myScopeObjects könnte man also Folgendes tun:

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

Wenn Sie solche Inhalte dynamisch hinzufügen, kann es sehr nützlich sein, im laufenden Betrieb eindeutige IDs zu generieren.

Sie können einfach Folgendes tun

In deinem js

$scope.id = 0;

In Ihrer Vorlage

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

was wird rendern

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

Es ist nicht erforderlich, in doppelten geschweiften Klammern zu verketten.

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

Wenn Sie diese Syntax verwenden:

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

Angular rendert so etwas wie:

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

Jedoch diese Syntax:

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

wird so etwas erzeugen wie:

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