選択したアイテムに基づいてngResource（angularjs）のデータを照会します

Question

anglejsでngResourceを使用して国が選択されている場合にのみ、都市のリストをレンダリングする小さなアプリケーションに取り組んでいます。今では、私のシステムが遅くなり、時々（ほとんどはios/Safari/iphone/ipadの）私のアプリケーションをフリーズさせる国や都市のリストをレンダリングすることができます。私はhtmlでフィルタを作成することができましたが、私の問題は、まず都市のリストがダウンロードされてから、最初にアプリケーションを開いてフィルタにかけることです。特定の国が選択されるまで、ngResourceが都市リストを表示しないようにしたいと考えています。私のコードは以下の通りです。アプリケーションをダウンロードするときに携帯電話とipadがフリーズしていると多くのユーザーが苦情を申し立てていたので、誰かがこれに対する答えを持っていることを願っています。

ありがとうございます。

services.js：

.factory('Country', ['$resource', function($resource){ 
    return $resource('/api/location/countries:id/'); 
}]) 

.factory('City', ['$resource', function($resource){ 
    return $resource('/api/location/cities:id/'); 
}]) 

controllers.js：

$scope.countries = []; 
    Country.query(function(response){ 
    $scope.countries = response; 
    }); 



$scope.cities = []; 
    City.query(function(response){ 
    $scope.cities = response; 
    }); 

HTML：

<div class="form-group"> 
<label ng-model="country" class="formlabel col-sm-4 control-label">Country</label>   
<div class="col-sm-8 formbox" ng-model="country"> 
<select class="form-control" ng-model="country" ng-change="user.country=country" ng-options="country.country for country in countries track by country.id" id="country" name="userRegisterCountry" required> 
<option value="">-- Choose Country --</option> 
</select> 
</div> 

<div class="form-group"> 
<label ng-model="city" class="formlabel col-sm-4 control-label">City</label> 
<div class="col-sm-8 formbox" ng-model="city"> 
<select class="form-control" ng-model="city" ng-change="user.city=city" ng-options="city.city for city in cities | filter: {country:country.id} track by city.id" id="city" name="userRegisterCity" required> 
<option value="">-- Choose City --</option> 
</select> 
</div> 

Answer 1

私は遅れが巨大な選択リストをフィルタリング+移入から来ていると仮定しています都市の国が選択されたときに都市のサブセットを取得できますか？それまで都市を取得していませんか？都市選択を通常通り無効にすることができます。国が選択されると、その国の都市を取得し、フィルタなしで都市ドロップダウンの都市のみを表示します。

JS：

には、次のようなものを試してみてください

$scope.selectCountry = function() { 
    $scope.user.country = $scope.country 
    MyApi.fetchCities($scope.country.id) // just an example, replace with something suitable for your case 
    .then(function(cities) { 
    $scope.country.cities = cities; 
    }) 
} 

HTML：

<div class="form-group"> 
    <label ng-model="country" class="formlabel col-sm-4 control-label">Country</label>   
    <div class="col-sm-8 formbox" ng-model="country"> 
     <select class="form-control" ng-model="country" ng-change="selectCountry()" ng-options="country.country for country in countries track by country.id" id="country" name="userRegisterCountry" required> 
      <option value="">-- Choose Country --</option> 
     </select> 
    </div> 
</div> 

<div class="form-group"> 
    <label ng-model="city" class="formlabel col-sm-4 control-label">City</label> 
    <div class="col-sm-8 formbox" ng-model="city"> 
     <select ng-disabled="!country" class="form-control" ng-model="city" ng-change="user.city=city" ng-options="city.city for city in country.cities" id="city" name="userRegisterCity" required> 
      <option value="">-- Choose City --</option> 
     </select> 
    </div> 
</div> 

だけでドロップダウンを移入するために都市の限られた量を持っていると思います。この方法は、遅れが少なくなるはずです。さらに、巨大都市リストをフィルタリングすることもなくなり、さらに役立ちます。

EDIT：オプション2あなたのAPIは、国によって都市をフィルタリングすることができない場合 - HTMLはほとんど同じまま：この場合

$scope.countries = []; 
Country.query(function(response) { 
    $scope.countries = response; 
    City.query(function(cities) { 
     _.forEach(cities, function(city) { 
      var country = _.find($scope.countries, {id: city.country}); 
      country.cities = country.cities || []; 
      country.cities.push(city); 
     }) 
    }); 
}); 

、あまりにも、ドロップダウンが都市のリスト全体が取り込まれることはありません遅れを低減すべきである。