跨多個選擇框拆分JSON數組

Question

我在我網站的某些部分使用AngularJS，而不是整個網站。 我有幾個選擇框，其中一個依賴於另一個。 一個包含國家/地區列表，另一個包含所選國家/地區的城市。

在過去，我會將我的json分成兩個查詢到服務器，所以在國家更改后，它將發送所選的值，服務器將相應地返回一個json列表，它將使用jquery插入到選擇框中。 這一次，並使用http://builtwith.angularjs.org/作為指南，我決定將所有內容作為一個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" ]}
]

我需要國家/地區的所有值作為國家/地區選擇框的一個列表，以及另一個選擇框的每個城市的列表。

到目前為止這是控制器 ：

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保留為一個請求/響應並在JS中處理它嗎？
2. 你如何加載每個選擇框'官方'angularjs方式？
3. 我知道選擇框上的ng-change屬性，但我不確定如何創建查詢並根據所選國家/地區更改城市列表值。

這是一個插件 ： http ： //plnkr.co/edit/zAcRjSDm9OndxugtsAOs ? p= preview

Answer 1

我不確定我是否走在正確的道路上，或者是否有更簡單的方法來實現這一目標。

是的，你正走在The Angular Way的道路上。 是的，有一種更簡單的方法。

我知道選擇框上的ng-change屬性，但我不確定如何創建查詢並根據所選國家/地區更改城市列表值。

這是一個分叉的Plunk ，演示了如何根據第一個選擇框的輸出設置第二個選擇框。

國家/地區選擇框通過ng-model路綁定，因此結果綁定到名為country的值

國家/地區選擇框使用country.cities作為其輸入，並將所選值綁定到city

我應該將整個json保留為一個請求/響應並在JS中處理它嗎？

這取決於您如何構建您的服務。 如果你不想將城市與國家分開，那么就要保持它們的界限。

否則，您可能希望擁有以下REST API：

get /country //returns array of all countries
get /<countryname>/cities //returns array of all cities in country

缺點是您需要對數據進行多次獲取請求。 好處是你的api更加模塊化。 但是，這取決於您的使用案例。

你如何加載每個選擇框'官方'angularjs方式？

你的plunk語法'c for c in cityList'看起來是正確的。