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>

通过这种方式，您只需要有限数量的城市来填充下拉列表，这样可以减少延迟。此外，我们摆脱了对大城市名单的过滤，这进一步有所帮助。

编辑：选项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);
        })
    });
});

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

基于所选项目在ngResource（angularjs）中查询数据

1 个答案: