简易控制中心，angular的简单使用

 1 <html>
 2   <head>
 3     <meta charset='utf-8'>
 4     <script src="js/angular.js"></script>
 5     <script src="js/app.js"></script>
 6     <link rel="stylesheet" href="css/bootstrap.css">
 7   </head>
 8   <body ng-app="MyApp">
 9     <div ng-controller="PaginationCtrl">
10       <table class="table table-striped">
11         <thead>
12           <tr>
13             <th>Id</th>
14             <th>Name</th>
15             <th>Description</th>
16           </tr>
17         </thead>
18         <tbody>
19           <tr ng-repeat="item in items | offset: currentPage*itemsPerPage | limitTo: itemsPerPage">
20             <td>{{item.id}}</td>
21             <td>{{item.name}}</td>
22             <td>{{item.description}}</td>
23           </tr>
24         </tbody>
25         <tfoot>
26           <td colspan="3">
27             <div class="pagination">
28               <ul>
29                 <li ng-class="prevPageDisabled()">
30                   <a href ng-click="prevPage()">« Prev</a>
31                 </li>
32                 <li ng-repeat="n in range()" ng-class="{active: n == currentPage}" ng-click="setPage(n)">
33                   <a href="#">{{n+1}}</a>
34                 </li>
35                 <li ng-class="nextPageDisabled()">
36                   <a href ng-click="nextPage()">Next »</a>
37                 </li>
38               </ul>
39             </div>
40           </td>
41         </tfoot>
42       </table>
43     </div>
44   </body>
45 </html>

 1 var app = angular.module("MyApp", []);
 2 
 3 app.filter('offset', function() {
 4   return function(input, start) {
 5     start = parseInt(start, 10);
 6     return input.slice(start);
 7   };
 8 });
 9 
10 app.controller("PaginationCtrl", function($scope) {
11 
12   $scope.itemsPerPage = 5;
13   $scope.currentPage = 0;
14   $scope.items = [];
15 
16   for (var i=0; i<50; i++) {
17     $scope.items.push({ id: i, name: "name "+ i, description: "description " + i });
18   }
19 
20   $scope.range = function() {
21     var rangeSize = 5;
22     var ret = [];
23     var start;
24 
25     start = $scope.currentPage;
26     if ( start > $scope.pageCount()-rangeSize ) {
27       start = $scope.pageCount()-rangeSize+1;
28     }
29 
30     for (var i=start; i<start+rangeSize; i++) {
31       ret.push(i);
32     }
33     return ret;
34   };
35 
36   $scope.prevPage = function() {
37     if ($scope.currentPage > 0) {
38       $scope.currentPage--;
39     }
40   };
41 
42   $scope.prevPageDisabled = function() {
43     return $scope.currentPage === 0 ? "disabled" : "";
44   };
45 
46   $scope.pageCount = function() {
47     return Math.ceil($scope.items.length/$scope.itemsPerPage)-1;
48   };
49 
50   $scope.nextPage = function() {
51     if ($scope.currentPage < $scope.pageCount()) {
52       $scope.currentPage++;
53     }
54   };
55 
56   $scope.nextPageDisabled = function() {
57     return $scope.currentPage === $scope.pageCount() ? "disabled" : "";
58   };
59 
60   $scope.setPage = function(n) {
61     $scope.currentPage = n;
62   };
63 
64 });