Question

假设我有一个用于编辑客户的表单，其中包含通过select元素指定的城市列表。真实的表单有很多列表，但是，现在这样做。

通过进行名为/ customer / {customerId}的休息api调用来填充表单。

通过拨打名为/ cities的休息api来填充列表。

调用是在控制器中按顺序进行的，使用$ http.get获取城市，另一个通过$ resource获取（不在下面的代码片段中）。

问题在于，如果获取客户数据的调用首先返回，表单将选择列表中的第一个城市而不是正确的城市。

以下是一些代码段：

HTML：

<select id="Select3" class="form-control" ng-model="formData.CityId">
    <option ng-repeat="j in Cities" value="{{j.CityId}}">{{j.City}}</option>
</select>

控制器：

.controller('customerInfoCtrl', ['$scope', '$http', '$modal', '$location', 'CustomerApi', function ($scope, $http, $modal, $location, CustomerApi) {
    $http.get('../api/v1/cities').success(function (data) {
        $scope.Cities = data;
    });

    $scope.formData = CustomerApi.get({ id: $scope.customerId }, function () {
        ...
    });     
  ....

我该如何解决这个问题？请记住，表单有很多列表。是否有可以系统应用的模式？

我知道$scope.$apply()或$scope.$apply(fn)。我应该在获得城市的电话的成功函数中调用其中一个吗？

由于

更新：

转换为ng-options似乎可以解决问题。我必须做更多的测试。

<select id="Select3" class="form-control" ng-model="formData.CityId" ng-options="j.CityId as j.City for j in Cities">
</select>

另一个更新：

我创建了一个plnkr，您可以在其中查看问题：http://plnkr.co/edit/Se8OIuxYBv4QXeH3Jgqh?p=preview

Answer 1

如果要确保某些数据在其他数据之前加载，请使用在使用两个get（）方法时获得的回调函数。因此，如果您想先加载城市，可能就是这样：

$http.get(../api/v1/cities').success(function (data) {
    $scope.Cities = data;
    //now that the cities are loaded, you can loead something else here. 
     $scope.formData = CustomerApi.get({ id: $scope.customerId }, function () {
    //this will always be loaded after cities
    });   
    $scope.loadSmthElse....  
}

在列表之前填充表单时，在选择列表中选择适当的项目

1 个答案: