Skip to content

Commit a6084ae

Browse files
author
nerv
committed
Added: examples with directives
1 parent 03ed30f commit a6084ae

File tree

13 files changed

+222
-4
lines changed

13 files changed

+222
-4
lines changed

‎README.md

+4-2
Original file line numberDiff line numberDiff line change
@@ -32,8 +32,10 @@ angular
3232
</ul>
3333
</div>
3434
```
35-
See [demo](http://nervgh.github.io/pages/angular-pagination/examples/) of full functionality
35+
See [demo](http://nervgh.github.io/pages/angular-pagination/examples/base) of full functionality
3636

3737

3838
## Demos
39-
1. [Example](http://nervgh.github.io/pages/angular-pagination/examples/) of full functionality
39+
1. [Example of full functionality](http://nervgh.github.io/pages/angular-pagination/examples/base)
40+
2. [Example of directive 1](http://nervgh.github.io/pages/angular-pagination/examples/directive-1)
41+
3. [Example of directive 2](http://nervgh.github.io/pages/angular-pagination/examples/directive-2)

‎examples/index.html renamed to ‎examples/base/index.html

+4-2
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
1010
<script src="https://code.angularjs.org/1.2.9/angular.min.js"></script>
1111
<!-- example -->
12-
<script src="../angular-pagination.js"></script>
12+
<script src="../../angular-pagination.js"></script>
1313
<script src="scripts.js"></script>
1414
</head>
1515
<body ng-controller="AppController">
@@ -23,7 +23,9 @@
2323
<li class="active dropdown">
2424
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Demos<b class="caret"></b></a>
2525
<ul class="dropdown-menu">
26-
<li class="active"><a href="#">Example</a></li>
26+
<li class="active"><a href="#">Base</a></li>
27+
<li><a href="/examples/directive-1">Directive-1</a></li>
28+
<li><a href="/examples/directive-2">Directive-2</a></li>
2729
</ul>
2830
</li>
2931
<li><a href="https://github.com/nervgh/angular-pagination">View on Github</a></li>

‎examples/scripts.js renamed to ‎examples/base/scripts.js

File renamed without changes.

‎examples/tpl-1.html renamed to ‎examples/base/tpl-1.html

File renamed without changes.

‎examples/tpl-2.html renamed to ‎examples/base/tpl-2.html

File renamed without changes.

‎examples/tpl-3.html renamed to ‎examples/base/tpl-3.html

File renamed without changes.

‎examples/tpl-4.html renamed to ‎examples/base/tpl-4.html

File renamed without changes.

‎examples/directive-1/index.html

+54
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
<!DOCTYPE html>
2+
<html ng-app="app">
3+
<head>
4+
<title>Angular Pagination</title>
5+
<meta charset="utf-8">
6+
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
7+
<!-- for bootstrap js -->
8+
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
9+
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
10+
<script src="https://code.angularjs.org/1.2.9/angular.min.js"></script>
11+
<!-- example -->
12+
<script src="../../angular-pagination.js"></script>
13+
<script src="scripts.js"></script>
14+
</head>
15+
<body ng-controller="AppController">
16+
<div class="container">
17+
<div class="navbar navbar-default">
18+
<div class="navbar-header">
19+
<a class="navbar-brand" href="https://github.com/nervgh/angular-pagination">Angular Pagination</a>
20+
</div>
21+
<div class="navbar-collapse collapse">
22+
<ul class="nav navbar-nav">
23+
<li class="active dropdown">
24+
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Demos<b class="caret"></b></a>
25+
<ul class="dropdown-menu">
26+
<li><a href="/examples/base">Base</a></li>
27+
<li class="active"><a href="#">Directive-1</a></li>
28+
<li><a href="/examples/directive-2">Directive-2</a></li>
29+
</ul>
30+
</li>
31+
<li><a href="https://github.com/nervgh/angular-pagination">View on Github</a></li>
32+
<li><a href="https://raw.github.com/nervgh/angular-pagination/master/angular-pagination.min.js">Download</a></li>
33+
</ul>
34+
</div>
35+
</div>
36+
<div class="row">
37+
<div class="col-md-9">
38+
<h1>Pagination</h1>
39+
<hr/>
40+
<div>
41+
<code>itemsPerPage</code>: <input type="number" ng-model="pagination.itemsPerPage"/><br/>
42+
<code>itemsCount</code>: <input type="number" ng-model="pagination.itemsCount"/><br/>
43+
<code>maxNumbers</code>: <input type="number" ng-model="pagination.maxNumbers"/><br/>
44+
<code>startPage</code>: <input type="number" ng-model="pagination.startPage"/><br/>
45+
</div>
46+
<br/>
47+
<pre>Page: <span ng-bind="pagination.currentPage"></span> / <span ng-bind="pagination.endPage"></span></pre>
48+
<div ng-pagination="pagination"></div>
49+
</div>
50+
<div class="col-md-3"></div>
51+
</div>
52+
</div>
53+
</body>
54+
</html>

‎examples/directive-1/scripts.js

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
2+
3+
angular
4+
5+
6+
.module('app', ['angularPagination'])
7+
8+
9+
.controller('AppController', function($scope, Pagination) {
10+
var pagination = $scope.pagination = Pagination.create({
11+
itemsPerPage: 10,
12+
itemsCount: 100,
13+
maxNumbers: 5
14+
});
15+
16+
pagination.onChange = function(page) {
17+
console.info('page=', page);
18+
};
19+
})
20+
21+
22+
.directive('ngPagination', function() {
23+
return {
24+
templateUrl: 'tpl-4.html',
25+
link: function(scope, element, attributes) {
26+
var p = scope.$eval(attributes.ngPagination);
27+
28+
function watcher() {
29+
return [p.startPage, p.maxNumbers, p.itemsCount, p.itemsPerPage].toString();
30+
}
31+
function handler() {
32+
p.setCurrent(p.currentPage);
33+
}
34+
35+
scope.$watch(watcher, handler);
36+
}
37+
};
38+
});

‎examples/directive-1/tpl-4.html

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<ul class="pagination">
2+
<li ng-class="{disabled: pagination.isFirst(pagination.currentPage)}" ng-click="pagination.setCurrent(pagination.startPage)">
3+
<a href>First</a>
4+
</li>
5+
<li ng-class="{disabled: !pagination.inRange(pagination.currentPage - 1)}" ng-click="pagination.setCurrent(pagination.currentPage - 1)">
6+
<a href>Prev</a>
7+
</li>
8+
<li ng-show="pagination.inRange(pagination.pages[0] - 1)" ng-click="pagination.setCurrent(pagination.currentPage - pagination.maxNumbers)">
9+
<a href>&hellip;</a>
10+
</li>
11+
<li ng-repeat="page in pagination.pages track by $index" ng-class="{active: pagination.isCurrent(page)}" ng-click="pagination.setCurrent(page)">
12+
<a href ng-bind="page"></a>
13+
</li>
14+
<li ng-show="pagination.inRange(pagination.pages[pagination.pages.length - 1] + 1)" ng-click="pagination.setCurrent(pagination.currentPage + pagination.maxNumbers)">
15+
<a href>&hellip;</a>
16+
</li>
17+
<li ng-class="{disabled: !pagination.inRange(pagination.currentPage + 1)}" ng-click="pagination.setCurrent(pagination.currentPage + 1)">
18+
<a href>Next</a>
19+
</li>
20+
<li ng-class="{disabled: pagination.isLast(pagination.currentPage)}" ng-click="pagination.setCurrent(pagination.endPage)">
21+
<a href>Last</a>
22+
</li>
23+
</ul>

‎examples/directive-2/index.html

+46
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
<!DOCTYPE html>
2+
<html ng-app="app">
3+
<head>
4+
<title>Angular Pagination</title>
5+
<meta charset="utf-8">
6+
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
7+
<!-- for bootstrap js -->
8+
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
9+
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
10+
<script src="https://code.angularjs.org/1.2.9/angular.min.js"></script>
11+
<!-- example -->
12+
<script src="../../angular-pagination.js"></script>
13+
<script src="scripts.js"></script>
14+
</head>
15+
<body ng-controller="AppController">
16+
<div class="container">
17+
<div class="navbar navbar-default">
18+
<div class="navbar-header">
19+
<a class="navbar-brand" href="https://github.com/nervgh/angular-pagination">Angular Pagination</a>
20+
</div>
21+
<div class="navbar-collapse collapse">
22+
<ul class="nav navbar-nav">
23+
<li class="active dropdown">
24+
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Demos<b class="caret"></b></a>
25+
<ul class="dropdown-menu">
26+
<li><a href="/examples/base">Base</a></li>
27+
<li><a href="/examples/directive-1">Directive-1</a></li>
28+
<li class="active"><a href="#">Directive-2</a></li>
29+
</ul>
30+
</li>
31+
<li><a href="https://github.com/nervgh/angular-pagination">View on Github</a></li>
32+
<li><a href="https://raw.github.com/nervgh/angular-pagination/master/angular-pagination.min.js">Download</a></li>
33+
</ul>
34+
</div>
35+
</div>
36+
<div class="row">
37+
<div class="col-md-9">
38+
<h1>Pagination</h1>
39+
<hr/>
40+
<div ng-pagination="onPageChange"></div>
41+
</div>
42+
<div class="col-md-3"></div>
43+
</div>
44+
</div>
45+
</body>
46+
</html>

‎examples/directive-2/scripts.js

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
2+
3+
angular
4+
5+
6+
.module('app', ['angularPagination'])
7+
8+
9+
.controller('AppController', function($scope) {
10+
$scope.onPageChange = function(page) {
11+
console.info('page=', page);
12+
};
13+
})
14+
15+
16+
.directive('ngPagination', ['Pagination', function(Pagination) {
17+
return {
18+
templateUrl: 'tpl-4.html',
19+
link: function(scope, element, attributes) {
20+
var cb = scope.$eval(attributes.ngPagination) || angular.noop;
21+
var pagination = scope.pagination = Pagination.create({
22+
itemsPerPage: 10,
23+
itemsCount: 100,
24+
maxNumbers: 5,
25+
onChange: cb
26+
});
27+
pagination.setCurrent(1);
28+
}
29+
};
30+
}]);

‎examples/directive-2/tpl-4.html

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<ul class="pagination">
2+
<li ng-class="{disabled: pagination.isFirst(pagination.currentPage)}" ng-click="pagination.setCurrent(pagination.startPage)">
3+
<a href>First</a>
4+
</li>
5+
<li ng-class="{disabled: !pagination.inRange(pagination.currentPage - 1)}" ng-click="pagination.setCurrent(pagination.currentPage - 1)">
6+
<a href>Prev</a>
7+
</li>
8+
<li ng-show="pagination.inRange(pagination.pages[0] - 1)" ng-click="pagination.setCurrent(pagination.currentPage - pagination.maxNumbers)">
9+
<a href>&hellip;</a>
10+
</li>
11+
<li ng-repeat="page in pagination.pages track by $index" ng-class="{active: pagination.isCurrent(page)}" ng-click="pagination.setCurrent(page)">
12+
<a href ng-bind="page"></a>
13+
</li>
14+
<li ng-show="pagination.inRange(pagination.pages[pagination.pages.length - 1] + 1)" ng-click="pagination.setCurrent(pagination.currentPage + pagination.maxNumbers)">
15+
<a href>&hellip;</a>
16+
</li>
17+
<li ng-class="{disabled: !pagination.inRange(pagination.currentPage + 1)}" ng-click="pagination.setCurrent(pagination.currentPage + 1)">
18+
<a href>Next</a>
19+
</li>
20+
<li ng-class="{disabled: pagination.isLast(pagination.currentPage)}" ng-click="pagination.setCurrent(pagination.endPage)">
21+
<a href>Last</a>
22+
</li>
23+
</ul>

0 commit comments

Comments
 (0)