Question

我正在尝试使用angularjs设置加载时选择框的默认项。

我从2个json中加载了两个选择框，因此名为“city”的第二个选择框依赖于第一个选择框“country”：

  <label>Country:</label>
  <select name="country" ng-model="form.country" 
        ng-options="c.n for c in countryList" 
        ng-change="countryChanged()" required></select>

  <label>City:</label>
  <select name="city" ng-model="form.city" 
        ng-options="c for c in cityList" required></select>

PLUNKER http://plnkr.co/edit/hKZLbMbwGfmaa8CtSy0H?p=preview

使用$http.get加载选择框。如果我将它默认为第一个选项，它加载的一切都很好。但是，我想说，我想在加载时指定某个选项，但我只能从json发送一个特定的值，我该怎么做？在下面的代码中，注释行是我尝试过的，但它所做的只是加载正确的城市列表，但保留未选择的国家/地区选择框。

countries.json

[
  {"c":"au","n":"Australia","g":"1"},
  {"c":"fr","n":"France","g":"2"},
  {"c":"ge","n":"Germany","g":"2"}
]

控制器：

$http.get('countries.json')
  .success(function (data) {
    $scope.countryList = data;
    $scope.form.country = data[0];
    // $scope.form.country.c = 'fr'; <<<--- *trying to set default*
    $scope.countryChanged();
});

$scope.countryChanged = function() {

  $http.get($scope.form.country.c + '-cities.json')
    .success(function (data) {
      $scope.cityList = data;
      $scope.form.city = data[0];
    });
}

此外，如果有更好的方法来实现这一点，请发布它。

注意：我无法加入json。我把它分开是因为在现实世界中，每个国家可能有100个国家，每个国家有100个城市，而json的规模相当大。

Answer 1

不确定，但这是否满足要求？ http://plnkr.co/edit/rBDVzg7iXfaHu4XmiVsb?p=preview

var selectCountry = function( data, code ) {
  for ( var i = 0; i < data.length; i++ ) {
    var country = data[ i ];
    if ( country.c !== code ) { continue; }
    return country
  }
};

$http.get('countries.json')
  .success(function (data) {
    $scope.countryList = data;
    $scope.form.country = selectCountry( data, 'fr');
    $scope.countryChanged();
});

Answer 2

只需在第12行设置控制器：

$scope.form.country = data[1];

它将法国视为默认，希望我理解你的问题。

使用angularjs设置选择框的默认项目

2 个答案: