1

我在我的部分网站中使用 AngularJS，而不是整个网站。我有几个选择框，其中一个依赖于另一个。一个包含国家列表，另一个包含所选国家/地区的城市。

过去，我会将我的 json 拆分为对服务器的 2 个查询，因此当国家/地区发生变化时，它将发送选定的值，并且服务器将相应地返回一个 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

4

1 回答 1

3

我不确定我是否走在正确的道路上，或者是否有更简单的方法来实现这一目标。

是的，您正走在 The Angular Way 的道路上。是的，有一种更简单的方法。

我知道选择框上的 ng-change 属性，但我不确定如何创建查询并根据所选国家/地区更改城市列表值。

这是一个分叉的Plunk，它演示了如何根据第一个选择框的输出设置第二个选择框。

国家/地区选择框有 2way 绑定 via 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' 似乎是正确的。

于 2013-04-16T04:27:51.250 回答