分頁在AngularJS

Question

我使用的是引導的分頁指令分頁添加到表。

有什麼好奇怪這個是，當我手動添加到$ scope.transactions（見控制器註釋掉的代碼），分頁工作完全正常。但是當我嘗試通過AJAX調用填充$ scope.transactions時，表中什麼都沒有顯示。 Ajax調用返回如下：

[{"date":"2017-01-06","amount":123,"action":"Deposit","id":1},{"date":"2017-01-06","amount":200,"action":"Deposit","id":2},{"date":"2017-01-06","amount":400,"action":"Deposit","id":3}]

查看：

<tr ng-repeat="transaction in f "> 

    <td>{{transaction.id}}</td> 
    <td>$ {{transaction.amount}}</td> 
    <td>{{transaction.action}}</td> 
    <td>{{transaction.date}}</td> 
    </tr> 
    </table> 
    <pagination 
      ng-model="currentPage" 
      total-items="transactions.length" 
      max-size="maxSize" 
      boundary-links="true"> 
     </pagination> 

控制器：

var mmyApp = angular.module('myApp',['ui.bootstrap']).controller('TasksController', TasksController); 
    function TasksController($scope, $http) { 

    $scope.f = [] 
     ,$scope.currentPage = 1 
     ,$scope.numPerPage = 3 
     ,$scope.maxSize = 5; 
    $scope.transactions = []; 
    $scope.history = ""; 

    $http.get('transactions').then(function (response) { 

     $scope.transactions = response.data; 
    }, function (error) { 
     throw error; 
    }); 

    //if i use this commented out code instead of the AJAX call, the pagination works fine 
    /*$scope.makeTransactions = function() { 
      $scope.transactions = []; 
      for (i=1;i<=1000;i++) { 
       $scope.transactions.push({"id":i}); 
      } 
      }; 
      $scope.makeTransactions(); 
      */ 
    $scope.$watch('currentPage + numPerPage', function() { 
      var begin = (($scope.currentPage - 1) * $scope.numPerPage) 
      , end = begin + $scope.numPerPage; 

      $scope.f = $scope.transactions.slice(begin, end); 
      }); 


} 

Answer 1

你忘了你的Ajax調用填充$scope.transactions後填充$scope.f。在你的ng-repeat中，你正在循環應該存儲在$scope.f中的物品，但它是空的。