仅当Angular从资源对象检索数据时选择一个选项元素

Question

我正在尝试在select html元素中加载对象列表。 问题在于，在实际从服务器返回数据之前正在编译代码。 因此，未选择我要在选择元素中选择的选项。 我怎样才能解决这个问题？

我有以下HTML：

<select ng-options="location.name for location in locations" ng-model="selectedOption" />

控制器代码：

$scope.locations = data.locations.getAll();
$scope.selectedOption = $scope.locations[1];

数据服务调用RESTful服务：

app.factory('data', function($resource) {
    var locationsResource = $resource('http://localhost:10128/api/locations/:id', {id: '@id'});

    return {
        locations: {
            getAll: function() {
                return locationsResource.query();
            }
        }
   }
});

Answer 1

您需要使用$resource的$promise ，如下所示：

$scope.locations = data.locations.getAll();
$scope.locations.$promise.then(function (result) {
    $scope.selectedOption = result[1];
});

您还可以在.then()之后添加错误处理函数。

这是AngularJS中的promise如何工作的一个很好的例证。