在AngularJS中使用ng-options设置填充选择菜单的'selected'选项答案

【问题标题】：Set 'selected' option of populated select menu with ng-options in AngularJS在AngularJS中使用ng-options设置填充选择菜单的'selected'选项
【发布时间】：2017-03-05 18:15:29
【问题描述】：

我想通过 AngularJS ng-option 指令填充一个选择菜单，并选择一个预定义的选项作为默认值。

AngularJS 获取的 JSON 格式如下：

{"AF":"Afghanistan","AX":"\u00c5land Islands","AL":"Albania","DZ":"Algeria","AS":"American Samoa","AD"}

填充选择菜单的代码有效：

 angular.module('drpdwnApp', []).controller('drpdwnCtrl', function ($scope, $http) {
     $scope.selectedCountries = null;
     $scope.countries = [];

     $http({
              method: 'GET',
              url: '/api/getCountries'
     }).success(function (result) {
              $scope.countries = result;
     });
 });

选择菜单的 HTML：

<select name="property_country" ng-model="drpdpwnvalue" ng-options="key as value for (key , value) in countries track by key">
     <option value="">Please choose</option>
</select>

现在，假设我想使用键“AL”将国家/地区定义为选定的默认选项。如何实现？

【问题讨论】：

标签： javascript angularjs

【解决方案1】：

只需在控制器中将 $scope.drpdpwnvalue 设置为 'AL'：

angular.module('drpdwnApp', []).controller('drpdwnCtrl', function ($scope, $http) {
     $scope.selectedCountries = null;
     $scope.countries = [];
     $scope.drpdpwnvalue = 'AL'; // this line is added
     $http({
              method: 'GET',
              url: '/api/getCountries'
     }).success(function (result) {
              $scope.countries = result;
     });
 });

ng-options 与 ng-model 同步工作，因此只需操作 ng-model 值，其他部分由 angular 处理

更新我做了一些调试，发现track by key 是问题所在。所以删除它。我还创建了working plunker，看看吧。

【讨论】：

我刚刚注意到你使用了两个 ng-model 声明ng-model="drpdpwnvalue" ng-model="selectedCountries"，你需要删除最后一个
是的，它已正确填充。哦，是的，这是一个错误，但是删除第二个也没有任何区别。我还尝试在成功函数中使用您的附加代码，但也没有运气。
好的，现在它似乎工作了，但是请检查选项元素的生成源。选项的 value 属性现在还包括数据类型（例如“string:VALUE”）。这就是我在代码中添加“按键跟踪”的原因，它只显示没有任何数据类型的值。
不要担心字符串：VALUE，它只被angular使用。您的模型将具有正确的值。我更新了plunker。尝试更改选定的选项，它会提醒值
好吧，我要把它的数据发布到服务器端脚本。我认为我会遇到问题，因为数据类型可能会被提交，并且它是 value 属性的一部分。

【解决方案2】：

在选项元素上尝试ng-selected。

<select ng-model="drpdpwnvalue" ng-model="selectedCountries">
     <option value="{{key}}" ng-repeat="key as value for (key , value) in countries track by key" ng-selected="key === 'AL'">{{value}}</option>
</select>

【讨论】：

谢谢，但是 ng-options 没有解决方案吗？此外，我宁愿避免使用花括号，因为我的模板引擎也使用了花括号。

【解决方案3】：

我终于通过简单地使用 JQuery 来实现它，因为这两种 Angular 解决方案都不适用于我：

    $( document ).ready(function() {
        $.getJSON("/api/getCountries", function(result) {
            var options = $("select[name=property_country]");

            $.each(result, function(key, value) {
                options.append($("<option />").val(key).text(value));
            });

            $('select[name=property_country] option[value="AL"]').attr("selected", "selected");
        });
    });

不过，这仅供参考，不会被接受，因为它是由 JQuery 实现的。

【讨论】：