Angularjs 将从资源服务检索的数据数组推送到范围内的另一个数组中

Question

我正在尝试实现分页服务。因此，在控制器中，我有两种方法可以从我的数据库中获取船只列表（使用 Rails API）。要获取数据，控制器正在使用具有资源的服务（简单查询方法）：

.factory('Boat', 
      function($resource){          
        var boats =
         $resource('http://127.0.0.1\:3000/:action', {}, {     
            query: {method:'GET', params:{action:'boats'}, isArray:true},
            getBoatsByBusinessId: {method:'GET', params:{action:'boatsByBusinessId'}, isArray:true}
         });        
         return boats;            
      }
  )

在我的控制器中，我有两种方法（也许我可以只使用一种，但我认为这一点并不重要）：

$scope.getOptionList = function(departure, departureDate, arrivalDate, people) { 
  $scope.pagIndex = 0;                      
  $scope.boats = Boat.query({pagIndex: $scope.pagIndex}); // List of boats is filled correctly
};

OPTION_1：

   $scope.moreResultsBoats = function() {  
        $scope.pagIndex = $scope.pagIndex + 1;                                 
        $scope.moreBoats = Boat.query({pagIndex: $scope.pagIndex});
        console.log("moreBoats:" + $scope.moreBoats);
        angular.forEach($scope.moreBoats, function(boat, key) {             
            $scope.boats.push(boat);
        });
  }

或OPTION_2：

$scope.moreResultsBoats = function() {  
            $scope.pagIndex = $scope.pagIndex + 1;                                 
            $scope.moreBoats = Boat.query({pagIndex: $scope.pagIndex});
            console.log("moreBoats:" + $scope.moreBoats);
            $scope.boats.push.apply($scope.boats, $scope.moreBoats);
}

这两个选项都没有将$scope.moreBoats中的新船数组添加到$scope.boats中（或者至少视图没有刷新）。我想我不了解 AngularJS 的工作原理，因为控制台.log只显示这个：moreBoats: .

但是，如果我将 {{moreBoats | json }} 添加到我的视图中，出于跟踪目的，我可以在它们来的时候看到 json 中的船。

我错过了什么？

谢谢罗伯托。

Answer 1

感谢您@Maxim回复。我将尝试您的最后一个解决方案。无论如何，我现在已通过将控制器更新为：

$scope.moreResultsBoats = function() {  
            $scope.pagIndex = $scope.pagIndex + 1;                                 
            Boat.query({pagIndex: $scope.pagIndex}, 
                function success(result) {
                    console.log('Ejecuting callback. Result:' + result);
                    $scope.boats.push.apply($scope.boats, result);      
                }
            );                              
        };

再次感谢！

Answer 2

您的工厂Boat是异步的，并返回promise。

这就是为什么您稍后在{{moreBoats | json }}中获取数据的原因。

要使其起作用，您可以用.then包装承诺。

像这样：

Boat.query({pagIndex: $scope.pagIndex})
                    .then(function (result) {
                       $scope.moreBoats = result;                           
                    }, function (result) {
                        alert("Error: No data returned");
                    });  

和工厂：

.factory('Boat',   function($resource){          
        var boats =
         $resource('http://127.0.0.1\:3000/:action', {}, {     
            query: {method:'GET', params:{action:'boats'}, isArray:true},
            getBoatsByBusinessId: {method:'GET', params:{action:'boatsByBusinessId'}, isArray:true}
         });

         var factory = {
            query: function (selectedSubject) {
                var deferred = $q.defer();
                 deferred.resolve(boats);
                return deferred.promise;
            }
        }
        return factory;         
      }
  )

关于承诺的参考：

承诺表示未来值，通常是异步操作的未来结果，并允许我们定义一旦该值可用或发生错误时会发生什么。