Angular UI bootstrap pagination not working inside ui.bootstrap.tabs

问题

Angular UI bootstrap gives awesome solutions. Very unfortunately Pagination (ui.bootstrap.pagination) does not working inside Tabs (ui.bootstrap.tabs)

DEMO 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>

回答1:

Your $watchdoesn't work! If you put console.log($scope.currentPage) inside your $watch function you will see, that there will be no output when the page changes.

I recommend using ng-change on the pagination element and define a function on the scope (instead of the $watch)!

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

To make sure that the currentPage model is updated you can set an object instead of just an integer (key to scope inheritance!)

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

I recommend reading this article: https://github.com/angular/angular.js/wiki/Understanding-Scopes

回答2:

Finally found solution with filter() instead of worry about $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>

回答3:

Try using this

<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>

来源：https://stackoverflow.com/questions/31148039/angular-ui-bootstrap-pagination-not-working-inside-ui-bootstrap-tabs