ng-option Auswahl gebunden an separates Array

Question

Ich habe ein Produktmodell mit einer Eigenschaft, die ich an ein separates Array von Optionen binden möchte. Grundsätzlich von Produktmodell hat eine Eigenschaft namens ‚Kategorie‘, wie folgt aus:

productModel = { 
    Id : 1, 
    Description: 'Widget', 
    Category: 0, 
    ... 

Wie Sie sehen können, das Eigentum ist ein int (aus dem db), aber ich erhalte auch eine separate Anordnung von dem, was die Kategorien sind:

Categories : [ 
    { "Number" : 0, Name : "N/A" }, 
    { "Number" : 1, Name : "Option 1" }, 
    { "Number" : 2, Name : "Option 2" } 
] 

ich möchte mit dem entsprechenden Wert einer Auswahlliste in der Lage sein gezeigt, so dass, wenn das Produktmodell mit 0 Set kommt zurück dann der Standardwert in der Auswahlliste wird „N/A“ sein.

ich erreicht habe, dies zu tun:

<select ng-model="Categories[productModel.Category]" ng-options="v.name for v in Categories" ... 

aber das Problem dabei ist, dass, wenn ich die Option ändern Sie den Wert nicht zurück zum Modell ist verbindlich. Da die Daten auf dem Server zurückgeschickt werden, wenn der Benutzer den Wert ändert, möchte ich das productModel nicht so ändern, dass es die gleiche Namens- und Nummernstruktur wie die Kategorien hat (das kann ich, wenn es der beste Weg ist). Ich möchte nur, dass der Benutzer eine Option auswählen kann und das Produktmodell die entsprechende Nummer enthält.

Kann ich (soll ich) das mit "Track by" machen?

Answer 1

Sie benötigen ng-model Wert aktualisieren, um productModel.Category zu binden, müssen Sie auch Ihre ng-options Ausdruck der folgenden ng-options="v.Name as v.Number for v in categories" aktualisieren.

Sie können weitere Informationen zu den ng-options und ng-model Direktiven here finden.

Bitte siehe Beispiel Arbeits here

HTML:

<div ng-controller="TestController"> 
    <select ng-model="productModel.Category" ng-options="v.Name as v.Number for v in categories"></select> 
    <h3>productModel.Catecogy => {{productModel.Category}}</h3> 
</div> 

JS:

var myApp = angular.module('myApp', []); 

myApp.controller('TestController', ['$scope', function($scope) { 
    $scope.productModel = { 
    Id: 1, 
    Description: 'Widget', 
    Category: 0 
    }; 

    $scope.categories = [{ 
    "Number": 0, 
    Name: "N/A" 
    }, { 
    "Number": 1, 
    Name: "Option 1" 
    }, { 
    "Number": 2, 
    Name: "Option 2" 
    }]; 
}]); 

nicht relevant für die Frage, aber seine gute Praxis zu versuchen, den Fall Ihrer Eigenschaften zu behalten und Variablennamen sind gleich.