AngularJS ng-options, работающий с парами значений ключей в <select>

Question

Я пытаюсь работать с объектом, который я получаю через вызов $ http и используя для заполнения раскрывающихся списков.

Мой объект выглядит следующим образом:

{1: Item1 
↵L", 2: "Item2 
↵", 3: "Item3 
↵"} 

В мой контроллер:

$scope.data = {}; 
$http.get(baseUrl + "/Lookup/Get?param=Ref_myModel").success(function (result) { 

    $scope.data.myModel = result 

}) 
.error(function (error) { 
    $scope.data.error = error; 
}); 

Наконец, в HTML:

<select class="form-control" id="MonStatus" ng-model="data.myModel" ng-options="key as value for (key , value) in data.myModel"></select> 

Выбор: выпадающий заполняется значениями из модель без проблем, но как только пользователь выбирает значение, значение заменяется ключом. Я читал документацию, пытаясь понять ng-options, однако у меня возникают некоторые проблемы, так как все примеры используют объекты с соответствующими ключевыми форматами, в то время как у меня есть ключ и текст.

Answer 1

Вы используете $ scope.data.myModel как свою модель и исходный элемент для своих опций. Они должны быть разделены:

$scope.data = {}; 
$scope.data.myModel = ''; 
$http.get(baseUrl + "/Lookup/Get?param=Ref_myModel").success(function (result) { 

    $scope.data.options = result 

}) 
.error(function (error) { 
    $scope.data.error = error; 
}); 

Затем на ваш взгляд:

<select class="form-control" id="MonStatus" 
    ng-model="data.myModel" 
    ng-options="key as value for (key , value) in data.options"></select> 

Это будет связывать выбор для MyModel и пусть параметры остаются то, что они были ...

Некоторые дополнительные советы:

Кроме того, не делайте $ http звонков в контроллерах, размещайте их в службе. Всегда избегайте логики в ваших контроллерах и позволяйте службам/фабрикам заботиться о тяжелом подъеме. Кроме того, довольно неплохо разместить data- до ng-* атрибутов.