在AngularJS的多個選擇框中拆分JSON陣列

我是AngularJS的新手，對我來說很裸露。首先，我在我的網站部分使用AngularJS，而不是整個事情。我有幾個選擇框，其中一個依賴於另一個。一個包含一個國家列表，另一個包含所選國家的城市。在AngularJS的多個選擇框中拆分JSON陣列

在過去，我會將我的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

謝謝！

來源

2013-04-16 jzm

我不知道我是否在這裏正確的道路，或者如果有一個更簡單的方法來實現這一點。

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

我知道在選擇框中的NG-改變屬性的，但我不知道我怎麼會創建一個查詢，並根據所選國家改變城市列表值。

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

國家選擇框具有2WAY經由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

的缺點是，你需要爲數據的多個GET請求。好處是你的api有點模塊化。然而這取決於你的用例。

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

您的plunk語法'c for c in cityList'顯示正確。

來源

2013-04-16 04:27:51 Alan

謝謝你。我覺得我已經非常瞭解它。兩個更快的問題：我應該使用ngResource工廠調用json，還是堅持使用$ http？而且，你到底該如何自動選擇第一個選項呢？歡呼:) – jzm

我解決了它。這裏有一個與ngResource和自動選擇值一起工作的分支，但它使用ng-change來自動選擇第一個項目。這是最佳的嗎？ http://plnkr.co/edit/0n6CiDhTs3xkKo6cZd1h?p=preview – jzm

如果您使用的是RESTful服務，並且您希望做的不是非常基本的獲取，請使用ngResource。 $ http是一個較低級別的服務幫助程序，它提供了一個很好的包裝器，可以覆蓋XHR/JSONP。最好不要在控制器中使用「changed」函數，而是使用ng-init，但是，ng-init會在加載JSON數據之前執行，所以它不會選擇適當的值，所以我很確定你的更新解決方案是正確的。 – Alan

在AngularJS的多個選擇框中拆分JSON陣列

回答

相關問題