2

Angular UI bootstrap 提供了很棒的解决方案。非常不幸的是分页（ui.bootstrap.pagination）在选项卡（ui.bootstrap.tabs）中不起作用

演示 http://plnkr.co/edit/mLBkDwEVY6SIh5oCyy0K?p=preview

angular.module('mytodos', ['ui.bootstrap']).controller('TodoController', function($scope) {
  $scope.filteredTodos = [];
  $scope.currentPage = 1;
  $scope.numPerPage = 10;
  $scope.maxSize = 5;
  $scope.todos = [{
    "id": 1,
    "date": "12-Jan-2015",
    "cheque_no": 11111,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 2,
    "date": "22-February-2015",
    "cheque_no": 222222,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 3,
    "date": "14-March-2015",
    "cheque_no": 33333,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 4,
    "date": "16-April-2015",
    "cheque_no": 44444,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 5,
    "date": "30-May-2015",
    "cheque_no": 55555,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 6,
    "date": "22-February-2015",
    "cheque_no": 222222,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 7,
    "date": "14-March-2015",
    "cheque_no": 33333,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 8,
    "date": "16-April-2015",
    "cheque_no": 44444,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 9,
    "date": "30-May-2015",
    "cheque_no": 55555,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 10,
    "date": "22-February-2015",
    "cheque_no": 222222,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 11,
    "date": "14-March-2015",
    "cheque_no": 33333,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 12,
    "date": "16-April-2015",
    "cheque_no": 44444,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 13,
    "date": "30-May-2015",
    "cheque_no": 55555,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 14,
    "date": "22-February-2015",
    "cheque_no": 222222,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 15,
    "date": "14-March-2015",
    "cheque_no": 33333,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 16,
    "date": "16-April-2015",
    "cheque_no": 44444,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 17,
    "date": "30-May-2015",
    "cheque_no": 55555,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 18,
    "date": "22-February-2015",
    "cheque_no": 222222,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 19,
    "date": "14-March-2015",
    "cheque_no": 33333,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 20,
    "date": "16-April-2015",
    "cheque_no": 44444,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 21,
    "date": "30-May-2015",
    "cheque_no": 55555,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 22,
    "date": "22-February-2015",
    "cheque_no": 222222,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 23,
    "date": "14-March-2015",
    "cheque_no": 33333,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 24,
    "date": "16-April-2015",
    "cheque_no": 44444,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 25,
    "date": "30-May-2015",
    "cheque_no": 55555,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 26,
    "date": "30-May-2015",
    "cheque_no": 55555,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 27,
    "date": "22-February-2015",
    "cheque_no": 222222,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 28,
    "date": "14-March-2015",
    "cheque_no": 33333,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 29,
    "date": "16-April-2015",
    "cheque_no": 44444,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 30,
    "date": "30-May-2015",
    "cheque_no": 55555,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 31,
    "date": "30-May-2015",
    "cheque_no": 55555,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 32,
    "date": "22-February-2015",
    "cheque_no": 222222,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 33,
    "date": "14-March-2015",
    "cheque_no": 33333,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 34,
    "date": "16-April-2015",
    "cheque_no": 44444,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 35,
    "date": "30-May-2015",
    "cheque_no": 55555,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 36,
    "date": "30-May-2015",
    "cheque_no": 55555,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 37,
    "date": "22-February-2015",
    "cheque_no": 222222,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 38,
    "date": "14-March-2015",
    "cheque_no": 33333,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 39,
    "date": "16-April-2015",
    "cheque_no": 44444,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 40,
    "date": "30-May-2015",
    "cheque_no": 55555,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }];

  $scope.$watch('currentPage + numPerPage', function() {
    var begin = (($scope.currentPage - 1) * $scope.numPerPage),
      end = begin + $scope.numPerPage;
    $scope.filteredTodos = $scope.todos.slice(begin, end);
  });
});
.box {
  border: 1px solid #DDD;
  padding: 10px;
  position: relative;
  background: #FFF;
  margin: 0 0 10px;
}
.tab-content > .tab-pane > .box {
  border-top: none;
}
.tab-content > .box {
  border-top: none;
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.1.min.js"></script>
<div ng-app="mytodos" ng-controller="TodoController">
  <div class="container">

    <tabset>
      <tab>
        <tab-heading>Statement</tab-heading>
        <div class="box">
          <h1>Todos</h1>
          <h4>{{todos.length}} total</h4>
          <ul>
            <li ng-repeat="todo in filteredTodos">{{todo.id}} Index: {{$index}}</li>
          </ul>
          <pagination ng-model="currentPage" total-items="todos.length" max-size="maxSize" boundary-links="true">
          </pagination>
        </div>
      </tab>
    </tabset>
  </div>
</div>

4

3 回答 3

4

你的$watch不行！如果你把console.log($scope.currentPage)你的功能放在里面$watch，你会看到页面改变时不会有输出。

我建议ng-change在分页元素上使用并在作用域上定义一个函数（而不是 $watch）！

@see http://angular-ui.github.io/bootstrap/#/pagination

为确保 currentPage 模型已更新，您可以设置一个对象而不仅仅是一个整数（范围继承的关键！）

// JS
$scope.pagination = { currentPage: 1 };
// HTML
<pagination ng-model="pagination.currentPage">

我推荐阅读这篇文章：https ://github.com/angular/angular.js/wiki/Understanding-Scopes

于 2015-06-30T20:57:53.353 回答
0

终于找到解决方案filter()而不是担心$scope

angular.module('mytodos', ['ui.bootstrap']).controller('TodoController', function($scope) {
  $scope.filteredTodos = [];
  $scope.currentPage = 1;
  $scope.numPerPage = 10;
  $scope.maxSize = 5;
  $scope.todos = [{
    "id": 1,
    "date": "12-Jan-2015",
    "cheque_no": 11111,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 2,
    "date": "22-February-2015",
    "cheque_no": 222222,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 3,
    "date": "14-March-2015",
    "cheque_no": 33333,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 4,
    "date": "16-April-2015",
    "cheque_no": 44444,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 5,
    "date": "30-May-2015",
    "cheque_no": 55555,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 6,
    "date": "22-February-2015",
    "cheque_no": 222222,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 7,
    "date": "14-March-2015",
    "cheque_no": 33333,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 8,
    "date": "16-April-2015",
    "cheque_no": 44444,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 9,
    "date": "30-May-2015",
    "cheque_no": 55555,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 10,
    "date": "22-February-2015",
    "cheque_no": 222222,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 11,
    "date": "14-March-2015",
    "cheque_no": 33333,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 12,
    "date": "16-April-2015",
    "cheque_no": 44444,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 13,
    "date": "30-May-2015",
    "cheque_no": 55555,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 14,
    "date": "22-February-2015",
    "cheque_no": 222222,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 15,
    "date": "14-March-2015",
    "cheque_no": 33333,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 16,
    "date": "16-April-2015",
    "cheque_no": 44444,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 17,
    "date": "30-May-2015",
    "cheque_no": 55555,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 18,
    "date": "22-February-2015",
    "cheque_no": 222222,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 19,
    "date": "14-March-2015",
    "cheque_no": 33333,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 20,
    "date": "16-April-2015",
    "cheque_no": 44444,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 21,
    "date": "30-May-2015",
    "cheque_no": 55555,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 22,
    "date": "22-February-2015",
    "cheque_no": 222222,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 23,
    "date": "14-March-2015",
    "cheque_no": 33333,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 24,
    "date": "16-April-2015",
    "cheque_no": 44444,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 25,
    "date": "30-May-2015",
    "cheque_no": 55555,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 26,
    "date": "30-May-2015",
    "cheque_no": 55555,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 27,
    "date": "22-February-2015",
    "cheque_no": 222222,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 28,
    "date": "14-March-2015",
    "cheque_no": 33333,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 29,
    "date": "16-April-2015",
    "cheque_no": 44444,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 30,
    "date": "30-May-2015",
    "cheque_no": 55555,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 31,
    "date": "30-May-2015",
    "cheque_no": 55555,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 32,
    "date": "22-February-2015",
    "cheque_no": 222222,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 33,
    "date": "14-March-2015",
    "cheque_no": 33333,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 34,
    "date": "16-April-2015",
    "cheque_no": 44444,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 35,
    "date": "30-May-2015",
    "cheque_no": 55555,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 36,
    "date": "30-May-2015",
    "cheque_no": 55555,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 37,
    "date": "22-February-2015",
    "cheque_no": 222222,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 38,
    "date": "14-March-2015",
    "cheque_no": 33333,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 39,
    "date": "16-April-2015",
    "cheque_no": 44444,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 40,
    "date": "30-May-2015",
    "cheque_no": 55555,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }];
}).filter('pagination', function() {
	  return function(input, currentPage, pageSize) {
	    if(angular.isArray(input)) {
	      var start = (currentPage-1)*pageSize;
	      var end = currentPage*pageSize;
	      return input.slice(start, end);
	    }
	  };
	});
.box {
  border: 1px solid #DDD;
  padding: 10px;
  position: relative;
  background: #FFF;
  margin: 0 0 10px;
}
.tab-content > .tab-pane > .box {
  border-top: none;
}
.tab-content > .box {
  border-top: none;
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.1.min.js"></script>
<div ng-app="mytodos" ng-controller="TodoController">
  <div class="container">

    <tabset>
      <tab>
        <tab-heading>Statement</tab-heading>
        <div class="box">
          <h1>Todos</h1>
          <h4>{{todos.length}} total</h4>
          <ul>
            <li ng-repeat="todo in todos| pagination: currentPage : numPerPage">{{todo.id}} Index: {{$index}}</li>
          </ul>
          <pagination ng-model="currentPage" total-items="todos.length" max-size="maxSize" boundary-links="true">
          </pagination>
        </div>
      </tab>
    </tabset>
  </div>
</div>

于 2015-07-03T15:37:06.873 回答
0

尝试使用这个

<script data-require="ui-bootstrap@*" data-semver="0.12.1" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.1.min.js"></script>
于 2016-09-12T09:02:21.253 回答