How to do paging in AngularJS

The paging is most usefull feature of web appliation.

Below is code block to achive Paging in AngularJS.


<html ng-app="todos"/>

<head>
  <link data-require="bootstrap-css@3.3.4" data-semver="3.3.4" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"></link>
  <script data-require="angular.js@1.3.15" data-semver="1.3.15" src="http://code.angularjs.org/1.3.15/angular.min.js"></script>
  <script data-require="angular-ui-bootstrap@0.12.1" data-semver="0.12.1" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.1.min.js"></script>
  <link href="style.css" rel="stylesheet"></link>
  <script src="script.js"></script>
</head>

<body ng-controller="TodoController">
  <h1>
Todos</h1>
<h4>
{{todos.length}} remain</h4>
<ul>
<li ng-repeat="todo in filteredTodos">{{todo.text}}</li>
</ul>
<pagination boundary-links="true" class="pagination-sm" max-size="maxSize" ng-model="currentPage" total-items="todos.length">
  </pagination>
</body>


Running Example

Posted in Labels: | 0 comments