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-*是一个不错的主意。

AngularJS ng-options，使用<select> </select>中的键值对

1 个答案: