Lets Have a fun with Technology.

BTemplates.com

Follow by Email

Sunday, July 17, 2016

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