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);
}

两个OPTIONS都没有将$ scope.moreBoats中的新船数组添加到$ scope.boats（或者至少视图未刷新）。我想我不了解AngularJS的工作原理，因为console.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;         
      }
  )

有关承诺：

的参考资料

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

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

2 个答案: