我在我网站的某些部分使用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>
目前，两个选择框都已填充，但它们的文本包含数组的两个值。 城市框包含所有城市，而不仅仅是第一个国家/地区的城市。
我不确定我是否走在正确的道路上，或者是否有更简单的方法来实现这一目标。
总而言之，我想知道：
- 我应该将整个json保留为一个请求/响应并在JS中处理它吗？
- 你如何加载每个选择框'官方'angularjs方式？
- 我知道选择框上的ng-change属性，但我不确定如何创建查询并根据所选国家/地区更改城市列表值。
这是一个插件 ： http ： //plnkr.co/edit/zAcRjSDm9OndxugtsAOs ? p= preview