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

265

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

Thierry Marianne
quelle

Antworten:

392

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>
Thierry Marianne
quelle
1
Woher kommt myScopeObjectdas? Wo würde ich es definieren?
Jan Aagaard
1
@JanAagaard Nehmen wir an, es myScopeObjecthandelt sich um eine Eigenschaft eines scopeObjekts, das mithilfe eines Controllers verfügbar gemacht wird. Siehe auch docs.angularjs.org/guide/controller . Ist Ihnen das klar genug oder werde ich weiter darauf eingehen?
Thierry Marianne
Ich habe ng-attr-id = "{{'Panel' + file.Id}}", aber es generiert nicht id = "Panel12312" für mich :(
Manuel Maestrini
17
Sind die folgenden zwei Verhaltensweisen nicht identisch: <div id="{{ 'object' + index }}">und <div ng-attr-id="{{ 'object' + index }}">? Die Dokumente scheinen zu sagen, dass das Voranstellen ng-attr-in Fällen hilfreich ist, in denen das Element nicht dem Standard entspricht, z. B. nicht a <div>. Lese ich die Dokumente richtig?
Broc.seib
3
Bei @ broc.seib mit nd-attr geht es nicht nur um Standard. Dies ist eine gute Vorgehensweise, da der HTML-Interpreter dem Element eine ID zuweisen kann, bevor Angular geladen wird. Und ng-attr stellt sicher, dass dem Element nur dann eine ID zugewiesen wird, wenn der Winkel geladen wird. Gleiches gilt für ng-src im <img> -Tag.
Alex
70

Dieses Ding hat bei mir ziemlich gut funktioniert:

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

Tanveer Shaikh
quelle
Die Zeit vergeht wie im Fluge und vielleicht funktioniert die intuitivste Syntax jetzt wie erwartet. Ich erinnere mich, dass ich beim Durchlaufen einer Liste einige Probleme hatte.
Thierry Marianne
2
Dies funktioniert in 90% der Fälle korrekt, aber manchmal können Fehler auftreten, die schwer zu debuggen sind. Sie sollten stattdessen ng-attr-id verwenden.
Baki
ng-attr-idist in 0% der Situationen vorteilhaft. Es können keine Beispiele angegeben werden, da es keine gibt.
Omikes
5
Das ng-attr-idVerfahren besteht darin , sicherzustellen , dass der rohe ng Ausdruck nie in einem gültigen HTML - Attribute gerendert wird (zB id, labelusw.). Dies dient dazu, jegliche nachgelagerte Verwendung von ng 'Junk' zu stoppen (z. B. bevor das Rendern abgeschlossen ist oder nach einem js-Absturz)
Überflogen am
34

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

<div [id]="element.id"></div>
SoEzPz
quelle
2
Das ist nicht sinnvoll, die Frage steht im Zusammenhang mit AngularJS
btk
8
Genau; Es wird nur für diejenigen Mitglieder nützlich sein, die es nützlich finden.
SoEzPz
16
Einige Mitglieder klicken immer noch auf Angularjs Links, obwohl sie nach Angular Links suchen. Es ist etwas verwirrend und es werden weiterhin Fehler auftreten.
SoEzPz
24

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.

Cumulo Nimbus
quelle
Ich denke, dieser Ansatz hat Probleme. Ich initialisiere die Winkelbindung, nachdem die Seite geladen wurde. Jetzt kann das Div manchmal nicht richtig geladen werden, was vermutlich auf das Aufeinandertreffen der ID eines anderen Div zurückzuführen ist.
Sumeet
Interessant. Wenn Sie Ihr Verhalten in einem Plunker-Beispiel reproduzieren könnten, würde ich es gerne überprüfen. Funktioniert die Verwendung von 'ng-attr-id =' und die Verwendung von 'id =' nicht?
Cumulo Nimbus
9

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.

emil.c
quelle
2

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

D. Mohamed
quelle
Warum ein $ vor dem Index?
Pipo
Ich denke, es liegt wahrscheinlich daran, dass das in einer ng-Wiederholung sein soll?
Gian1200
Genau. @Pipo sollten Sie, vielleicht, überprüfen Sie hier docs.angularjs.org/api/ng/directive/ngRepeat :)
D. Mohamed
0

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>
K Rajesh Kumar
quelle
6
Erklären Sie, was Sie sagen wollen?
Kumar
6
Warum sollte ng-attr-iderstellen ng-id..? das ist falsch. Ich frage mich, wer dies positiv bewertet
TJ