我使用Bootstrap的分页指令将分页添加到表中。奇怪的是,当我手动添加到$作用域事务时分页运行非常好,但是,当我试图通过Ajax调用填充$作用域事务时,该表没有显示任何内容。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>
Controller:
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);
});
}