ng-Modell mit Assoziation auf Auswahlbox mit ng-Wiederholung auf Optionen

Question

Ich habe eine Plunker here illustrating my issue. Ich habe ein Objekt mit einem zugeordneten division. Es gibt keine division_id auf dem Objekt, aber um die division einzustellen oder zu aktualisieren, muss ich das division_id Feld einstellen. Hier ist das Beispielobjekt:

$scope.user = { 
    name: "John", 
    age: 32, 
    division: { 
    id: 3, 
    name: "Alpha" 
    } 
}; 

und das Beispiel Divisionen:

$scope.divisions = [ 
    { 
    name: "Gamma", 
    id: 1 
    }, 
    { 
    name: "Alpha", 
    id: 3 
    }, 
    { 
    name: "Beta", 
    id: 5 
    } 
]; 

So wie ich baue das Auswahlfeld ist mit ng-repeat, die ich hatte gehofft, würde die Notwendigkeit umgehen zu verfolgen ng-Modell für den ausgewählten Wert.

<div class="form-group"> 
     <label for="">Division</label> 
     <select type="text" ng-model="user.division_id"> 
     <option ng-repeat="division in divisions" 
      ng-selected="user.division.id == division.id">{{ division.name }}</option> 
     </select> 
    </div> 

Wie Sie in der Demo sehen können, das selected Attribut wird auf der rechten Seite Option platziert wird, aber immer noch das Auswahlfeld Anzeige ist leer. Selbst wenn ich dem Objekt division_id: 3 hinzufüge, bleibt es weiterhin leer. Wie kann ich das zum Laufen bringen, ohne das Objekt beim Laden und Aktualisieren zu konvertieren?

Edit: Um diese Frage zu adressieren als Duplikat gekennzeichnet ist, ich denke, das ist einzigartig, weil ich frage, wie man mit ng-repeat das Auswahlfeld zu bauen, nicht ng-options. Obwohl die Antwort der Antwort für das vorgeschlagene Duplikat ähnlich ist, denke ich, dass andere Leute bei dieser Methode hängen bleiben könnten und es hilfreich finden, zu sehen, dass die Antwort eine andere Technik erfordert.

Answer 1

Wenn Sie Ihre Auswahl wie folgt aktualisieren, wird sie standardmäßig dem Benutzer division.id angezeigt.

<select ng-model="user.division" ng-options="d as d.name for d in divisions track by d.id"> 

Sie schien division_id ein separates Modell zu haben, den einzigen Grund zu fehlen ich denken kann dafür ist, dass Sie die Persistenz des user Modells steuern wollten, wenn die Auswahl aktualisiert. Wenn Sie aus irgendeinem Grund die Auswahl der Endbenutzer auf das Benutzermodell (oder auch nur das speicherinterne Benutzerobjekt) abfangen möchten, verwenden Sie eine Kopie. Es gibt viele Möglichkeiten, dies zu tun, aber es ist nicht klar, ob dies der Fall ist du fragst.

Updated plunkr

Hinweis wäre es gearbeitet hat die gleiche Option ng-repeat Syntax gehalten zu haben, aber dies ist der empfohlene Winkel Art und Weise mit Optionen zu beschäftigen.

Answer 2

Wie in Ihrem Fall müssen Sie die ng-Modell-Anweisung aus dem Select-Tag entfernen, damit es funktioniert.

, wenn Sie eine division_id Variable für Ihren Code einstellen müssen, können Sie ng-init verwenden.

<div class="form-group"> 
    <label for="">Division</label> 
    <select type="text"> 
     <option ng-repeat="division in divisions" 
      ng-selected="user.division.id == division.id" 
      ng-init="division_id=division.name">{{ division.name }} 
     </option> 
     </select> 
    </div>