我在我网站的某些部分使用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

===============>>#1 票数:3 已采纳

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

是的,你正走在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'看起来是正确的。

  ask by jzm translate from so

未解决问题?本站智能推荐: