webentwicklung-frage-antwort-db.com.de

dynamische id ng-repeat

Ich versuche, eine dynamische ID zu meinem Div innerhalb meiner Wiederholung zu setzen. Lass mich ein Beispiel zeigen.

<div id="$index" ng-repeat="repeat in results.myJsonResults">
    <div id="$index" ng-click="saveID($index)" ng-repeat="subRepeat in results.myJsonResults.subresults">
</div>

Mein Problem ist, wenn ich auf mein untergeordnetes div klicke, möchte ich meinen übergeordneten ID-Namen erhalten, aber es sieht so aus, als würde die ID nicht korrekt auf das div gesetzt. Kann in diesem Konzept eine dynamische ID festgelegt werden?

PS: Ich habe in der Vergangenheit versucht, eine Zählermethode auf meinem Controller zu erstellen und einen Index festzulegen. Es stellt sich jedoch heraus, dass der Winkel nur den letzten Wert dieser ID erkennt.

40
marceloduende

Versuchen Sie Folgendes, um Ihre Frage zu beantworten:

<div id="{{$index}}" ...>

Obgleich das oben genannte funktionieren sollte, ist dies möglicherweise nicht das, was Sie wirklich wollen (!). Bitte beachten Sie, dass dies bei AngularJS eher selten ist, um Elemente zu manipulieren, indem diese durch id referenziert werden. 

Sie sollten sich auf Ihr Modell konzentrieren, die Benutzeroberfläche deklarativ beschreiben und den Rest von AngularJS erledigen lassen, ohne DOM-Manipulationen auf niedriger Ebene "von Hand" auszuführen.

66

Ein Anwendungsfall, den ich mir vorstellen kann, ist das Verknüpfen von <label>-Elementen mit ihren jeweiligen <input>-Elementen, wie in http://jsfiddle.net/YqUAp/ zu sehen ist.

Angewendet wird die Methode von a pkozlowski.opensource

<label for="{{ 'textField-' + $index }}">Option {{ $index }}</label>
<input type="text" id="{{ 'textField-' + $index }}" ng-model="field"/>

Ich bin mir jedoch nicht sicher, ob dies die effektivste Methode ist. (Auch wenn nur zur Lesbarkeit)

29
PixnBits
<div id="{{$index}}" ...>

Funktioniert gut, aber Sie können auch eine dynamische ID mit wiederholtem Feld eingeben, wenn subRepeat beispielsweise ein ID-Feld haben würde.

<div id="subRepeat{{subRepeat.id}}" ...>

Das wird Ids wie subRepeat1, SubRepeat2, ... auf Ihr wiederholtes div setzen

5
Quidam

sie müssen den Index in Ihren Objekten speichern

results = { myJsonResults : [ 
    { name: "abc", id: 1, subResults: [
                               { subName: "123", id: 1 },
                               { subName: "456", id: 2 }] }
    { name: "xyz", id: 2, subResults: [
                               { subName: "789", id: 1 },
                               { subName: "098", id: 2 }] }
                            ] };

Ihre Wiederholung bezieht sich auch auf Ergebnisse, die sie trennen, stattdessen thisResult verwenden:

<div id="thisResult.id" ng-repeat="thisResult in results.myJsonResults">
    {{ thisResult.name }}
    <div id="subResult.id" ng-click="saveID(subResult.id)" ng-repeat="subResult in thisResult.subResults"> {{ subResult.subName }} </div>
</div>
0
BaneStar007