當表格被填充到列表之前時，在選擇列表中選擇適當的項目

假設我有一個表單，用於編輯通過select元素指定的城市列表的客戶。真正的形式有很多列表，但是，現在這會做。當表格被填充到列表之前時，在選擇列表中選擇適當的項目

該表單通過將其餘的api調用稱爲/ customer/{customerId}來填充。

該列表通過使其他API調用/城市來填充。

在控制器中使用$ http.get獲取城市，而另一個通過$ resource get（不在下面的代碼片段中）調用。

問題是，如果先獲取客戶數據的呼叫返回，表單將選擇列表中的第一個城市而不是正確的城市。

下面是一些代碼片段：

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-選項，似乎這樣的伎倆。我必須做更多的測試。

<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

來源

2016-07-26 costa

也許異步隊列是一種解決方案？ – uamanager

您應該將此請求放在工廠上以返回承諾，然後在您的控制器中解決該承諾。 – developer033

如果你想確保其他之前的一些數據加載，使用回調函數你當使用你的兩個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.... 
}

來源

2016-07-26 23:25:00 Riv

問題是我在窗體上有大約15個列表。 – costa

'成功'方法已棄用，所以請使用'then'代替 – uamanager

@uamanager：該應用使用角度js 1.2.29。 – costa

當表格被填充到列表之前時，在選擇列表中選擇適當的項目

回答

相關問題