1

Web サイト全体ではなく、部分的に AngularJS を使用しています。もう一方に依存する選択ボックスがいくつかあります。1 つは国のリストを含み、もう 1 つは選択した国の都市を含みます。

以前は、json をサーバーへの 2 つのクエリに分割していたため、国が変更されると、選択した値が送信され、サーバーはそれに応じて json リストを返し、jquery を使用して選択ボックスに挿入されました。今回は、http://builtwith.angularjs.org/をガイドラインとして使用して、すべてを 1 つの json として返し、この機能を純粋に JavaScript で処理することにしました。

つまり、私のjsonは次のようになります。

[
  { "code": 1, "country": "Germany", "cities": [ "Berlin", "Munich" ] },
  { "code": 2, "country": "Italy", "cities": [ "Rome", "Venice" ] },
  { "code": 3, "country": "United Kingdom", "cities": [ "London", "Manchester" ]}
]

国選択ボックスの1つのリストとして国のすべての値が必要であり、他の選択ボックスの各都市のリストが必要です。

これまでのコントローラーは次のとおりです。

angular.module('myApp', [])
    .controller('MyController', ['$scope', '$http', function ($scope, $http) {


        $http.get('/api/locations')
            .success(function (data, status, header, config) {

                $scope.locations = data[0];
                $scope.countryList = [];
                $scope.cityList = [];

                for (var i = 0; i < data.length; i++) {
                    $scope.countryList.push([data[i].code, data[i].country]);
                    for (var j = 0; j < data[i].cities.length; j++) {
                        $scope.cityList.push([data[i].code + '-' + data[i].cities[j], data[i].cities[j]]);
                    }
                }
            });
    }]);

私の選択ボックス：

国:

<select ng-model="country" data-ng-options="c for c in countryList"></select>

市区町村:

<select data-ng-model="city" data-ng-options="c for c in cityList"></select>

現在、両方の選択ボックスが満たされていますが、それらのテキストには配列の両方の値が含まれています。都市ボックスには、最初の国の都市だけでなく、すべての都市が含まれています。

ここで正しい道を進んでいるかどうか、またはこれを達成するためのより簡単な方法があるかどうかはわかりません。

要約すると、私は知りたいです：

  1. json全体を1つのリクエスト/レスポンスとして保持し、JSで処理する必要がありますか?
  2. 各選択ボックスを「公式の」angularjsの方法でどのようにロードしますか?
  3. 選択ボックスの ng-change 属性は認識していますが、選択した国に応じてクエリを作成し、都市リストの値を変更する方法がわかりません。

ここにプランクがあります: http://plnkr.co/edit/zAcRjSDm9OndxugtsAOs?p=preview

4

1 に答える 1