Javascript 设置'；选定的'；使用AngularJS中的ng选项填充选择菜单的选项

我想通过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”的国家定义为选中的默认选项。如何实现这一点？

试试选项元素

<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>

{{value}}

试用选项元素

<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>

{{value}}

只需在控制器中将

$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选项
与ng模型同步工作，因此只需操纵
ng模型
值，其他部分由angular负责

更新
我做了一些调试，发现问题出在
track by key
上。所以把它拿走。我还创建了，看看。
只需在控制器中将
$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选项
与ng模型同步工作，因此只需操纵
ng模型
值，其他部分由angular负责

更新
我做了一些调试，发现问题出在
track by key
上。所以把它拿走。我还创建了，看一看。
我最终通过简单地使用JQuery实现了它，因为这两种角度解决方案对我来说都不合适：

    $( 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");
        });
    });

$（文档）.ready（函数（）{
$.getJSON（“/api/getCountries”，函数（结果）{
var options=$（“选择[name=property\u country]”）；
$。每个（结果、函数（键、值）{
options.append（$（“”）.val（key.text（value））；
});
$（'select[name=property_country]option[value=“AL”]”）。attr（“selected”、“selected”）；
});
});

但是，这只是供参考，不会成为公认的答案，因为它是通过JQuery实现的。
我最终通过简单使用JQuery实现的，因为两种角度解决方案对我都不适用：

    $( 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");
        });
    });

$（文档）.ready（函数（）{
$.getJSON（“/api/getCountries”，函数（结果）{
var options=$（“选择[name=property\u country]”）；
$。每个（结果、函数（键、值）{
options.append（$（“”）.val（key.text（value））；
});
$（'select[name=property_country]option[value=“AL”]”）。attr（“selected”、“selected”）；
});
});

但是，这只是供参考，并不是公认的答案，因为它是由JQuery实现的。
谢谢，但是没有使用ng选项的解决方案吗？此外，我希望避免使用大括号，因为我的模板引擎也使用大括号。谢谢，但是没有使用ng选项的解决方案吗？此外，我希望避免使用大括号，因为我的模板引擎也使用大括号。我刚刚注意到，您正在使用两个ng模型声明
ng model=“drpdpwnvalue”ng model=“selectedCountries”
，您需要删除最后一个。是的，它已正确填充。哦，是的，这是一个错误，但是删除第二个也没有任何区别。我还尝试在success函数中使用您的附加代码，但也没有成功。好的，现在它似乎可以工作了，但是请检查选项元素的生成源。选项的value属性现在还包括数据类型（例如“string:value”）。这就是为什么我在代码中添加了“按键跟踪”，它只显示没有任何数据类型的值。您的模型将具有正确的价值。我更新了plunker。尝试更改所选选项，它将提醒valueWell，我将把它的数据发布到服务器端脚本。我想我会遇到一个问题，因为数据类型可能会被提交，它也是value属性的一部分。我刚刚注意到，您正在使用两个ng model声明
ng model=“drpdpwnvalue”ng model=“selectedCountries”
，您需要删除最后一个。是的，它已正确填充。哦，是的，这是一个错误，但是删除第二个也没有任何区别。我还尝试在success函数中使用您的附加代码，但也没有成功。好的，现在它似乎可以工作了，但是请检查选项元素的生成源。选项的value属性现在还包括数据类型（例如“string:value”）。这就是为什么我在代码中添加了“按键跟踪”，它只显示没有任何数据类型的值。您的模型将具有正确的价值。我更新了plunker。尝试更改所选选项，它将提醒valueWell，我将把它的数据发布到服务器端脚本。我想我会遇到一个问题，因为数据类型可能会被提交，而且它也是value属性的一部分。