1

angularjs を使用して、読み込み時に選択ボックスのデフォルト項目を設定しようとしています。

2 つの json から両方の選択ボックスをロードするため、「city」という名前の 2 番目の選択ボックスは、最初の選択ボックス「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>

プランカー http://plnkr.co/edit/hKZLbMbwGfmaa8CtSy0H?p=preview

を使用して選択ボックスをロードします$http.get。最初のオプションをデフォルトにすると、すべてがうまくロードされます。しかし、ロード時に特定のオプションを選択するように指定したいのですが、json から特定の値しか送信できません。以下のコードでは、コメント行が私が試したものですが、正しい都市リストをロードするだけで、国の選択ボックスは選択されていません。

国.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 が非常に大規模になる可能性があるためです。

4

2 に答える 2

3

わかりませんが、これは要件を満たしていますか? 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();
});
于 2013-05-01T06:53:22.823 に答える
1

コントローラーの 12 行目に次のように設定します。

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

フランスをデフォルトに設定します。あなたの質問が理解できれば幸いです。

于 2013-05-01T07:00:05.097 に答える