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-* 属性之前也是一个不错的主意。