根据所选项目在 ngResource (angularjs) 中查询数据

Question

我正在开发一个小型应用程序，我希望仅在使用 angularjs 中的 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> 

这样，您只有有限数量的城市可以填充下拉列表，这应该会减少延迟。此外，我们摆脱了对庞大城市列表的过滤，这进一步提供了帮助。

编辑：如果您的 API 无法按国家/地区过滤城市，则选项 2 - 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);
        })
    });
});

在这种情况下，下拉列表也永远不会填充应该减少延迟的整个城市列表。