在AngularJS中用ng选项设置填充选择菜单的'selected'选项

我想通过AngularJS ng-option指令填充选择菜单，并选择预定义选项作为默认选项。在AngularJS中用ng选项设置填充选择菜单的'selected'选项

这是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”作为选定的默认选项来定义国家。这怎么能实现？

来源

2017-03-04 Chris

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

来源

2017-03-04 13:46:02 stackoverYC

谢谢，但有没有解决方案与ng选项？此外，我宁愿防止使用花括号，因为我的模板引擎也使用它们。 – Chris

只需设置$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-模型同步，所以只要操作ng-model值，另一部分是由角

照顾

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

$(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的实现将不会接受的答案：

来源

2017-03-04 16:37:02

不幸的是，这对我不起作用。 – Chris

下拉菜单本身是否正确显示国家？ –

我刚刚注意到你正在使用两个ng-model声明'ng-model =“drpdpwnvalue”ng-model =“selectedCountries”'，你需要删除最后一个 –

我终于通过简单的使用JQuery作为两个角的解决方案，我正常没有工作实现它。

来源

2017-03-05 10:15:29 Chris

在AngularJS中用ng选项设置填充选择菜单的'selected'选项

回答

相关问题