Angi UI引导程序分页在ui.bootstrap.tabs

时间：2015-06-30 20:35:00

标签： angularjs pagination angularjs-scope angular-ui-bootstrap angular-ui-bootstrap-tab

Angular UI bootstrap提供了很棒的解决方案。非常不幸的是，分页（ui.bootstrap.pagination）在标签（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>

3 个答案:

答案 0 :(得分：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

答案 1 :(得分：0)

最后找到了filter()的解决方案，而不是担心$scope

＆＃13;
＆＃13; 
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);
	    }
	  };
	});
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：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>
相关问题
最新问题