AngularJS ng选项，使用<选择>

AngularJS ng-options, working with key value pairs in <select>

本文关键字：lt 选择 gt 使用 ng 选项 AngularJS      更新时间：2023-09-26

我一直在尝试处理一个通过$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选项，但我遇到了一些问题，因为所有的例子都使用了具有正确键和值格式的对象，而我有一个键和文本。

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

相关文章：