Skip to content

Instantly share code, notes, and snippets.

@xxJimxx

xxJimxx/dynamicPagRepeatAngular.html

Forked from kmaida/dynamicPagRepeatAngular.html
Last active August 29, 2015 14:12
Show Gist options
  • Save xxJimxx/27ab7889534ceac00cc6 to your computer and use it in GitHub Desktop.
Save xxJimxx/27ab7889534ceac00cc6 to your computer and use it in GitHub Desktop.
Download ZIP
based on kmaida example these are quick edits to show an example of the changes I made. (I did not take the time to test this example but meant to show the main differences in my implementation)
Raw
dynamicPagRepeatAngular.html
<!DOCTYPE HTML>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<title>Dynamic Pagination w/ Filtering</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="Kim Maida">
<!-- JS Libraries -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js" type="text/javascript"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js" type="text/javascript"></script>
<!-- Angular Scripts -->
<script src="script.js" type="text/javascript"></script>
<!-- Bootstrap -->
<link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
</head>
<body>
<div ng-controller="PageCtrl">
<div ng-controller="PageCtrl">
<label>Search:</label> <input type="text" ng-model="term" placeholder="Search" />
<button>click initiates data retrieval from service</button>
<br />
<label>Filter by Category:</label>
<ul>
<li><a href="" ng-click="click('category','engineering'">Engineering</a></li>
<li><a href="" ng-click="click('category',management'">Management</a></li>
<li><a href="" ng-click="click('category','business'">Business</a></li>
</ul>
<label>Filter by Branch:</label>
<ul>
<li><a href="" ng-click="click('branch','West')">West</a></li>
<li><a href="" ng-click="click('branch','East'">East</a></li>
</ul>
<p><strong><a href="" ng-click="click(null, null)">Show All</a></strong></p>
<h1>Items</h1>
<ul>
<li ng-repeat="item in filtered = (items | filter:search) | startFrom:(currentPage-1)*entryLimit | limitTo:entryLimit">{{item.name}}</li>
</ul>
<pagination page="currentPage" max-size="noOfPages" total-items="filtered.length" items-per-page="entryLimit"></pagination>
</div>
</body>
</html>
Raw
script.js
var app = angular.module('myApp', ['ui.bootstrap']);
app.filter('startFrom', function () {
return function (input, start) {
if (input) {
start = +start;
return input.slice(start);
}
return [];
};
});
app.controller('PageCtrl', ['$scope', 'filterFilter', function ($scope, filterFilter) {
$scope.items = [{
"name": "name 1",
"category": [{
"category": "management"
}, {
"category": "business"
}],
"branch": "West"
}, {
"name": "name 2",
"category": [{
"category": "engineering"
}],
"branch": "West"
}, {
"name": "name 3",
"category": [{
"category": "management"
}, {
"category": "engineering"
}],
"branch": "West"
}, {
"name": "name 4",
"category": [{
"category": "management"
}, {
"category": "business"
}],
"branch": "West"
}, {
"name": "name 5",
"category": [{
"category": "management"
}, {
"category": "business"
}],
"branch": "East"
}, {
"name": "name 6",
"category": [{
"category": "management"
}, {
"category": "business"
}],
"branch": "East"
}, {
"name": "name 7",
"category": [{
"category": "management"
}, {
"category": "business"
}],
"branch": "East"
}, {
"name": "name 8",
"category": [{
"category": "business"
}],
"branch": "West"
}, {
"name": "name 9",
"category": [{
"category": "management"
}, {
"category": "business"
}],
"branch": "East"
}, {
"name": "name 10",
"category": [{
"category": "management"
}],
"branch": "East"
}, {
"name": "name 11",
"category": [{
"category": "management"
}, {
"category": "business"
}],
"branch": "East"
}, {
"name": "name 12",
"category": [{
"category": "engineering"
}],
"branch": "West"
}, {
"name": "name 13",
"category": [{
"category": "management"
}, {
"category": "business"
}],
"branch": "West"
}, {
"name": "name 14",
"category": [{
"category": "engineering"
}],
"branch": "East"
}, {
"name": "name 15",
"category": [{
"category": "management"
}, {
"category": "engineering"
}],
"branch": "East"
}, {
"name": "name 16",
"category": [{
"category": "management"
}],
"branch": "West"
}, {
"name": "name 17",
"category": [{
"category": "management"
}],
"branch": "East"
}, {
"name": "name 18",
"category": [{
"category": "business"
}],
"branch": "West"
}, {
"name": "name 19",
"category": [{
"category": "business"
}],
"branch": "West"
}, {
"name": "name 20",
"category": [{
"category": "engineering"
}],
"branch": "East"
}, {
"name": "Peter",
"category": [{
"category": "business"
}],
"branch": "East"
}, {
"name": "Frank",
"category": [{
"category": "management"
}],
"branch": "East"
}, {
"name": "Joe",
"category": [{
"category": "business"
}],
"branch": "East"
}, {
"name": "Ralph",
"category": [{
"category": "management"
}, {
"category": "business"
}],
"branch": "East"
}, {
"name": "Gina",
"category": [{
"category": "business"
}],
"branch": "East"
}, {
"name": "Sam",
"category": [{
"category": "management"
}, {
"category": "engineering"
}],
"branch": "East"
}, {
"name": "Britney",
"category": [{
"category": "business"
}],
"branch": "West"
}];
$scope.click = function(parameter, value){
switch(parameter){
case "branch":
$scope.search.branch=value;
break;
case "category":
$scope.search.category=value;
break;
default:
$scope..search = {};
break;
}
}
// pagination controls
$scope.currentPage = 1;
$scope.entryLimit = 8; // items per page
$scope.noOfPages = 5; //Number of buttons
}]);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment