답변:
UI Bootstrap 의 페이지 매김 지시문을 확인하십시오 . 현재 사용하기에 충분한 기능을 갖추고 있으며 함께 사용할 수있는 철저한 테스트 사양 이 있기 때문에 여기에 게시 된 것보다 사용 했습니다.
<!-- table here -->
<pagination
ng-model="currentPage"
total-items="todos.length"
max-size="maxSize"
boundary-links="true">
</pagination>
<!-- items/page select here if you like -->todos.controller("TodoController", function($scope) {
$scope.filteredTodos = []
,$scope.currentPage = 1
,$scope.numPerPage = 10
,$scope.maxSize = 5;
$scope.makeTodos = function() {
$scope.todos = [];
for (i=1;i<=1000;i++) {
$scope.todos.push({ text:"todo "+i, done:false});
}
};
$scope.makeTodos();
$scope.$watch("currentPage + numPerPage", function() {
var begin = (($scope.currentPage - 1) * $scope.numPerPage)
, end = begin + $scope.numPerPage;
$scope.filteredTodos = $scope.todos.slice(begin, end);
});
});나는 참고 로 작동하는 플 런커 를 만들었습니다 .
<!-- table here -->
<div data-pagination="" data-num-pages="numPages()"
data-current-page="currentPage" data-max-size="maxSize"
data-boundary-links="true"></div>
<!-- items/page select here if you like -->todos.controller("TodoController", function($scope) {
$scope.filteredTodos = []
,$scope.currentPage = 1
,$scope.numPerPage = 10
,$scope.maxSize = 5;
$scope.makeTodos = function() {
$scope.todos = [];
for (i=1;i<=1000;i++) {
$scope.todos.push({ text:"todo "+i, done:false});
}
};
$scope.makeTodos();
$scope.numPages = function () {
return Math.ceil($scope.todos.length / $scope.numPerPage);
};
$scope.$watch("currentPage + numPerPage", function() {
var begin = (($scope.currentPage - 1) * $scope.numPerPage)
, end = begin + $scope.numPerPage;
$scope.filteredTodos = $scope.todos.slice(begin, end);
});
});나는 참고 로 작동하는 플 런커 를 만들었습니다 .
pagination요소 에서 설정해야하는 특성입니다 .
최근에 Built with Angular 사이트에 페이징을 구현했습니다. https://github.com/angular/builtwith.angularjs.org 소스를 확인하십시오.
필터를 사용하여 페이지를 분리하지 마십시오. 컨트롤러 내에서 항목을 페이지로 분할해야합니다.
Use your downvotes whenever you encounter an egregiously sloppy, no-effort-expended post, or an answer that is clearly and perhaps dangerously incorrect.
나는 Angular로 페이지 매김을 상당히 몇 번 구현해야했으며, 항상 단순화 될 수 있다고 느낀 것은 약간의 고통이었습니다. 여기 및 다른 곳에서 제시된 아이디어 중 일부를 사용하여 페이지 매김을 간단하게 만드는 페이지 매김 모듈을 만들었습니다.
<ul>
<li dir-paginate="item in items | itemsPerPage: 10">{{ item }}</li>
</ul>
// then somewhere else on the page ....
<dir-pagination-controls></dir-pagination-controls>그게 다야. 다음과 같은 기능이 있습니다.
items에서 페이지 매김 링크에 연결하기 위해 컨트롤러에 사용자 지정 코드가 필요하지 않습니다 .ng-repeat하므로 ng-repeat필터링, 순서 지정 등을 비롯하여 에서 사용할 수있는 모든 표현식을 사용할 수 있습니다 .pagination-controls되는 컨텍스트에 대해 아무것도 알 필요가 없습니다 paginate."플러그 앤 플레이"솔루션을 찾는 사람들에게는 이것이 유용하다고 생각합니다.
이 코드는 GitHub에서 사용할 수 있으며 꽤 좋은 테스트 세트가 포함되어 있습니다.
https://github.com/michaelbromley/angularUtils/tree/master/src/directives/pagination
당신이 관심이 있다면 나는 또한 모듈의 디자인에 대해 조금 더 통찰력있는 짧은 조각을 썼습니다 : http://www.michaelbromley.co.uk/blog/108/paginate-almost-anything-in-angularjs/
방금 btford 코드를 사용하여 각 열에서 페이지 매김 + 검색 + 순서를 표시하는 JSFiddle을 만들었습니다 : http://jsfiddle.net/SAWsA/11/
new_sorting_order가 있습니다 newSortingOrder. 수정하고을 추가하면 @scope.search();예상대로 정렬되고 정렬 아이콘도 업데이트됩니다. (크롬, F12, 콘솔 탭에서 브라우저의 디버깅 콘솔을 연 상태에서 바이올린을 실행하면 분명합니다).
Scotty.NET의 plunkr를 업데이트 했습니다 http://plnkr.co/edit/FUeWwDu0XzO51lyLAEIA?p=preview 하여 최신 버전의 angular, angular-ui 및 bootstrap을 사용합니다.
제어 장치
var todos = angular.module('todos', ['ui.bootstrap']);
todos.controller('TodoController', function($scope) {
$scope.filteredTodos = [];
$scope.itemsPerPage = 30;
$scope.currentPage = 4;
$scope.makeTodos = function() {
$scope.todos = [];
for (i=1;i<=1000;i++) {
$scope.todos.push({ text:'todo '+i, done:false});
}
};
$scope.figureOutTodosToDisplay = function() {
var begin = (($scope.currentPage - 1) * $scope.itemsPerPage);
var end = begin + $scope.itemsPerPage;
$scope.filteredTodos = $scope.todos.slice(begin, end);
};
$scope.makeTodos();
$scope.figureOutTodosToDisplay();
$scope.pageChanged = function() {
$scope.figureOutTodosToDisplay();
};
});부트 스트랩 UI 구성 요소
<pagination boundary-links="true"
max-size="3"
items-per-page="itemsPerPage"
total-items="todos.length"
ng-model="currentPage"
ng-change="pageChanged()"></pagination>이것은 구글 검색 결과와 같은 페이지 매김 로직을 구현하기 위해 Angular 서비스로 포장 한 순수한 자바 스크립트 솔루션입니다.
http://codepen.io/cornflourblue/pen/KVeaQL/ 에서 CodePen에 대한 실무 데모
이 블로그 게시물의 세부 사항 및 설명
function PagerService() {
// service definition
var service = {};
service.GetPager = GetPager;
return service;
// service implementation
function GetPager(totalItems, currentPage, pageSize) {
// default to first page
currentPage = currentPage || 1;
// default page size is 10
pageSize = pageSize || 10;
// calculate total pages
var totalPages = Math.ceil(totalItems / pageSize);
var startPage, endPage;
if (totalPages <= 10) {
// less than 10 total pages so show all
startPage = 1;
endPage = totalPages;
} else {
// more than 10 total pages so calculate start and end pages
if (currentPage <= 6) {
startPage = 1;
endPage = 10;
} else if (currentPage + 4 >= totalPages) {
startPage = totalPages - 9;
endPage = totalPages;
} else {
startPage = currentPage - 5;
endPage = currentPage + 4;
}
}
// calculate start and end item indexes
var startIndex = (currentPage - 1) * pageSize;
var endIndex = startIndex + pageSize;
// create an array of pages to ng-repeat in the pager control
var pages = _.range(startPage, endPage + 1);
// return object with all pager properties required by the view
return {
totalItems: totalItems,
currentPage: currentPage,
pageSize: pageSize,
totalPages: totalPages,
startPage: startPage,
endPage: endPage,
startIndex: startIndex,
endIndex: endIndex,
pages: pages
};
}
}여기서 관련 비트를 추출했습니다. 이것은 '프릴없는'표식 호출기이므로 정렬 또는 필터링이 포함되지 않습니다. 필요에 따라 자유롭게 변경 / 추가하십시오 :
//your data source may be different. the following line is
//just for demonstration purposes only
var modelData = [{
text: 'Test1'
}, {
text: 'Test2'
}, {
text: 'Test3'
}];
(function(util) {
util.PAGE_SIZE = 10;
util.range = function(start, end) {
var rng = [];
if (!end) {
end = start;
start = 0;
}
for (var i = start; i < end; i++)
rng.push(i);
return rng;
};
util.Pager = function(data) {
var self = this,
_size = util.PAGE_SIZE;;
self.current = 0;
self.content = function(index) {
var start = index * self.size,
end = (index * self.size + self.size) > data.length ? data.length : (index * self.size + self.size);
return data.slice(start, end);
};
self.next = function() {
if (!self.canPage('Next')) return;
self.current++;
};
self.prev = function() {
if (!self.canPage('Prev')) return;
self.current--;
};
self.canPage = function(dir) {
if (dir === 'Next') return self.current < self.count - 1;
if (dir === 'Prev') return self.current > 0;
return false;
};
self.list = function() {
var start, end;
start = self.current < 5 ? 0 : self.current - 5;
end = self.count - self.current < 5 ? self.count : self.current + 5;
return Util.range(start, end);
};
Object.defineProperty(self, 'size', {
configurable: false,
enumerable: false,
get: function() {
return _size;
},
set: function(val) {
_size = val || _size;
}
});
Object.defineProperty(self, 'count', {
configurable: false,
enumerable: false,
get: function() {
return Math.ceil(data.length / self.size);
}
});
};
})(window.Util = window.Util || {});
(function(ns) {
ns.SampleController = function($scope, $window) {
$scope.ModelData = modelData;
//instantiate pager with array (i.e. our model)
$scope.pages = new $window.Util.Pager($scope.ModelData);
};
})(window.Controllers = window.Controllers || {});<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<table ng-controller="Controllers.SampleController">
<thead>
<tr>
<th>
Col1
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in pages.content(pages.current)" title="{{item.text}}">
<td ng-bind-template="{{item.text}}"></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4">
<a href="#" ng-click="pages.prev()">«</a>
<a href="#" ng-repeat="n in pages.list()" ng-click="pages.current = n" style="margin: 0 2px;">{{n + 1}}</a>
<a href="#" ng-click="pages.next()">»</a>
</td>
</tr>
</tfoot>
</table>아래 솔루션은 매우 간단합니다.
<pagination
total-items="totalItems"
items-per-page= "itemsPerPage"
ng-model="currentPage"
class="pagination-sm">
</pagination>
<tr ng-repeat="country in countries.slice((currentPage -1) * itemsPerPage, currentPage * itemsPerPage) "> jQuery Mobile 각도 어댑터에는 기반이 될 수있는 페이징 필터가 있습니다.
여기에 그것을 사용하는 데모 바이올린이 있습니다 (5 개 이상의 항목을 추가하고 페이징됩니다) : http://jsfiddle.net/tigbro/Du2DY/
여기 소스가 있습니다 : https://github.com/tigbro/jquery-mobile-angular-adapter/blob/master/src/main/webapp/utils/paging.js
나처럼 테이블에 페이지 매김을 만드는 것이 어려운 사람이라면 이것을 게시합니다. 따라서 귀하의 관점에서 :
<pagination total-items="total" items-per-page="itemPerPage" ng-model="currentPage" ng-change="pageChanged()"></pagination>
<!-- To specify your choice of items Per Pages-->
<div class="btn-group">
<label class="btn btn-primary" ng-model="radioModel" btn-radio="'Left'" data-ng-click="setItems(5)">5</label>
<label class="btn btn-primary" ng-model="radioModel" btn-radio="'Middle'" data-ng-click="setItems(10)">10</label>
<label class="btn btn-primary" ng-model="radioModel" btn-radio="'Right'" data-ng-click="setItems(15)">15</label>
</div>
//And don't forget in your table:
<tr data-ng-repeat="p in profiles | offset: (currentPage-1)*itemPerPage | limitTo: itemPerPage" >당신의 각도에서 :
var module = angular.module('myapp',['ui.bootstrap','dialogs']);
module.controller('myController',function($scope,$http){
$scope.total = $scope.mylist.length;
$scope.currentPage = 1;
$scope.itemPerPage = 2;
$scope.start = 0;
$scope.setItems = function(n){
$scope.itemPerPage = n;
};
// In case you can replace ($scope.currentPage - 1) * $scope.itemPerPage in <tr> by "start"
$scope.pageChanged = function() {
$scope.start = ($scope.currentPage - 1) * $scope.itemPerPage;
};
});
//and our filter
module.filter('offset', function() {
return function(input, start) {
start = parseInt(start, 10);
return input.slice(start);
};
}); 이 타사 페이지 매김 라이브러리를 사용하고 잘 작동합니다. 로컬 / 원격 데이터 소스를 수행 할 수 있으며 매우 구성 가능합니다.
https://github.com/michaelbromley/angularUtils/tree/master/src/directives/pagination
<dir-pagination-controls
[max-size=""]
[direction-links=""]
[boundary-links=""]
[on-page-change=""]
[pagination-id=""]
[template-url=""]
[auto-hide=""]>
</dir-pagination-controls>Angular 1.4부터 limitTo필터는 두 번째 선택적 인수도 허용합니다.begin
로부터 문서 :
{{limitTo_expression | limitTo : limit : begin}}
begin (선택 사항) string | number
제한을 시작할 인덱스입니다. 음의 인덱스 인 begin은 입력 끝에서 오프셋을 나타냅니다. 기본값은 0입니다.
따라서 새로운 지시문을 만들 필요가 없습니다 .이 인수는 페이지 매김의 오프셋을 설정하는 데 사용할 수 있습니다
ng-repeat="item in vm.items| limitTo: vm.itemsPerPage: (vm.currentPage-1)*vm.itemsPerPage" Bootstrap UI 지시문을 사용하여이 작업을 쉽게 수행 할 수 있습니다.
이 답변은 @ Scotty.NET에서 제공 한 답변을 수정 한 것이므로 코드를 변경했습니다. <pagination> 지시문이 더 이상 사용되지 않으므로 .
다음 코드는 페이지 매김을 생성합니다.
<ul uib-pagination
boundary-links="true"
total-items="totalItems"
items-per-page="itemsPerPage"
ng-model="currentPage"
ng-change="pageChanged()"
class="pagination"
previous-text="‹"
next-text="›"
first-text="«"
last-text="»">
</ul>작동하게하려면 컨트롤러에서 다음을 사용하십시오.
$scope.filteredData = []
$scope.totalItems = $scope.data.length;
$scope.currentPage = 1;
$scope.itemsPerPage = 5;
$scope.setPage = function (pageNo) {
$scope.currentPage = pageNo;
};
$scope.pageChanged = function() {
var begin = (($scope.currentPage - 1) * $scope.itemsPerPage)
, end = begin + $scope.itemsPerPage;
$scope.filteredData = $scope.data.slice(begin, end);
};
$scope.pageChanged();페이지 매김 옵션에 대한 자세한 내용은 다음을 참조하십시오. Bootstrap UI Pagination Directive
ng-repeat 페이지 매김
<div ng-app="myApp" ng-controller="MyCtrl">
<input ng-model="q" id="search" class="form-control" placeholder="Filter text">
<select ng-model="pageSize" id="pageSize" class="form-control">
<option value="5">5</option>
<option value="10">10</option>
<option value="15">15</option>
<option value="20">20</option>
</select>
<ul>
<li ng-repeat="item in data | filter:q | startFrom:currentPage*pageSize | limitTo:pageSize">
{{item}}
</li>
</ul>
<button ng-disabled="currentPage == 0" ng-click="currentPage=currentPage-1">
Previous
</button>
{{currentPage+1}}/{{numberOfPages()}}
<button ng-disabled="currentPage >= getData().length/pageSize - 1" ng- click="currentPage=currentPage+1">
Next
</button>
</div>
<script>
var app=angular.module('myApp', []);
app.controller('MyCtrl', ['$scope', '$filter', function ($scope, $filter) {
$scope.currentPage = 0;
$scope.pageSize = 10;
$scope.data = [];
$scope.q = '';
$scope.getData = function () {
return $filter('filter')($scope.data, $scope.q)
}
$scope.numberOfPages=function(){
return Math.ceil($scope.getData().length/$scope.pageSize);
}
for (var i=0; i<65; i++) {
$scope.data.push("Item "+i);
}
}]);
app.filter('startFrom', function() {
return function(input, start) {
start = +start; //parse to int
return input.slice(start);
}
});
</script>이전 메시지는 기본적으로 직접 페이징을 작성하는 방법을 권장했습니다. 당신이 나와 같고 완성 된 지시문을 선호한다면, 나는 ngTable 이라는 위대한 것을 발견했습니다 . 정렬, 필터링 및 페이지 매김을 지원합니다.
보기에 필요한 모든 것이 매우 깨끗한 솔루션입니다.
<table ng-table="tableParams" class="table">
<tr ng-repeat="user in $data">
<td data-title="'Name'" sortable="'name'">
{{user.name}}
</td>
<td data-title="'Age'" sortable="'age'">
{{user.age}}
</td>
</tr>
</table>그리고 컨트롤러에서 :
$scope.tableParams = new ngTableParams({
page: 1, // show first page
count: 10, // count per page
sorting: {
name: 'asc' // initial sorting
}
}, {
total: data.length, // length of data
getData: function($defer, params) {
// use build-in angular filter
var orderedData = params.sorting() ?
$filter('orderBy')(data, params.orderBy()) :
data;
var start = (params.page() - 1) * params.count();
var end = params.page() * params.count();
$defer.resolve(orderedData.slice( start, end));
}
});GitHub에 연결 : https://github.com/esvit/ng-table/
오래된 질문이지만 내 접근 방식이 조금 다르고 덜 복잡하다고 생각하기 때문에 이것을 공유하고 나와 다른 사람이 유용하다고 생각합니다.
내가 쉽고 작은 솔루션으로 찾은 것페이지 매김에 으로 것은 지시문을 동일한 범위 변수를 사용하는 필터와 결합하는 것입니다.
이를 구현하려면 배열에 필터를 추가하고 다음과 같이 지시문을 추가하십시오.
<div class="row">
<table class="table table-hover">
<thead>
<tr>
<th>Name</th>
<th>Price</th>
<th>Quantity</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in items | cust_pagination:p_Size:p_Step">
<td>{{item.Name}}</td>
<td>{{item.Price}}</td>
<td>{{item.Quantity}}</td>
</tr>
</tbody>
</table>
<div cust-pagination p-items="items" p-boundarylinks="true" p-size="p_Size" p-step="p_Step"></div>
</div>p_Size 및 p_Step은 범위에서 사용자 정의 할 수있는 범위 변수이며, 그렇지 않으면 p_Size의 기본값은 5이고 p_Step은 1입니다.
페이지 매김에서 단계가 변경되면 p_Step이 업데이트되고 cust_pagination 필터에 의해 새 필터링이 트리거됩니다. cust_pagination 필터는 다음과 같이 p_Step 값에 따라 배열을 슬라이스하고 페이지 매김 섹션에서 선택한 활성 레코드 만 반환합니다.
var startIndex = nStep * nPageSize;
var endIndex = startIndex + nPageSize;
var arr = items.slice(startIndex, endIndex);
return arr;내 예가 있습니다. 목록 컨트롤러의 가운데에있는 선택된 단추. 구성 >>>
$scope.pagination = {total: null, pages: [], config: {count: 10, page: 1, size: 7}};페이지 매김 논리 :
/*
Pagination
*/
$scope.$watch('pagination.total', function (total) {
if(!total || total <= $scope.pagination.config.count) return;
_setPaginationPages(total);
});
function _setPaginationPages(total) {
var totalPages = Math.ceil(total / $scope.pagination.config.count);
var pages = [];
var start = $scope.pagination.config.page - Math.floor($scope.pagination.config.size/2);
var finish = null;
if((start + $scope.pagination.config.size - 1) > totalPages){
start = totalPages - $scope.pagination.config.size;
}
if(start <= 0) {
start = 1;
}
finish = start + $scope.pagination.config.size - 1;
if(finish > totalPages){
finish = totalPages;
}
for (var i = start; i <= finish; i++) {
pages.push(i);
}
$scope.pagination.pages = pages;
}
$scope.$watch("pagination.config.page", function(page){
_setPaginationPages($scope.pagination.total);
_getRespondents($scope.pagination.config);
});그리고 bootstap에 대한 나의 견해
<ul ng-class="{hidden: pagination.total == 0}" class="pagination">
<li ng-click="pagination.config.page = pagination.config.page - 1"
ng-class="{disabled: pagination.config.page == 1}" ><a href="#">«</a></li>
<li ng-repeat="p in pagination.pages"
ng-click="pagination.config.page = p"
ng-class="{active: p == pagination.config.page}"><a href="#">{{p}}</a></li>
<li ng-click="pagination.config.page = pagination.config.page + 1"
ng-class="{disabled: pagination.config.page == pagination.pages.length}"><a href="#">»</a></li>
</ul >쓸모있다
댓글을 달 수 있으면 좋겠지 만 여기에 남겨두면됩니다.
Scotty.NET의 답변과 이후 버전에 대한 user2176745의 리두는 모두 훌륭하지만 둘 다 내 버전의 AngularJS (v1.3.15)가 깨지는 것을 놓칩니다.
나는 $ scope.makeTodos에 정의되어 있지 않습니다.
따라서이 함수로 바꾸면 최신 각도 버전에서 수정됩니다.
$scope.makeTodos = function() {
var i;
$scope.todos = [];
for (i=1;i<=1000;i++) {
$scope.todos.push({ text:'todo '+i, done:false});
}
};개요 : 페이지 매김
- ng-repeat
- uib-pagination보기 :
<div class="row">
<div class="col-lg-12">
<table class="table">
<thead style="background-color: #eee">
<tr>
<td>Dispature</td>
<td>Service</td>
<td>Host</td>
<td>Value</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in app.metricsList">
<td>{{x.dispature}}</td>
<td>{{x.service}}</td>
<td>{{x.host}}</td>
<td>{{x.value}}</td>
</tr>
</tbody>
</table>
<div align="center">
<uib-pagination items-per-page="app.itemPerPage" num-pages="numPages"
total-items="app.totalItems" boundary-link-numbers="true"
ng-model="app.currentPage" rotate="false" max-size="app.maxSize"
class="pagination-sm" boundary-links="true"
ng-click="app.getPagableRecords()"></uib-pagination>
<div style="float: right; margin: 15px">
<pre>Page: {{app.currentPage}} / {{numPages}}</pre>
</div>
</div>
</div>
</div>JS 컨트롤러 :
app.controller('AllEntryCtrl',['$scope','$http','$timeout','$rootScope', function($scope,$http,$timeout,$rootScope){
var app = this;
app.currentPage = 1;
app.maxSize = 5;
app.itemPerPage = 5;
app.totalItems = 0;
app.countRecords = function() {
$http.get("countRecord")
.success(function(data,status,headers,config){
app.totalItems = data;
})
.error(function(data,status,header,config){
console.log(data);
});
};
app.getPagableRecords = function() {
var param = {
page : app.currentPage,
size : app.itemPerPage
};
$http.get("allRecordPagination",{params : param})
.success(function(data,status,headers,config){
app.metricsList = data.content;
})
.error(function(data,status,header,config){
console.log(data);
});
};
app.countRecords();
app.getPagableRecords();
}]);작동하는 솔루션 ngRepeat과 $watch슬라이스 배열을 사용하지 않고 함께 사용하는 필터 를 추가하고 싶습니다 .
필터 결과가 페이지가 매겨집니다!
var app = angular.module('app', ['ui.bootstrap']);
app.controller('myController', ['$scope', function($scope){
$scope.list= ['a', 'b', 'c', 'd', 'e'];
$scope.pagination = {
currentPage: 1,
numPerPage: 5,
totalItems: 0
};
$scope.searchFilter = function(item) {
//Your filter results will be paginated!
//The pagination will work even with other filters involved
//The total number of items in the result of your filter is accounted for
};
$scope.paginationFilter = function(item, index) {
//Every time the filter is used it restarts the totalItems
if(index === 0)
$scope.pagination.totalItems = 0;
//This holds the totalItems after the filters are applied
$scope.pagination.totalItems++;
if(
index >= (($scope.pagination.currentPage - 1) * $scope.pagination.numPerPage)
&& index < ((($scope.pagination.currentPage - 1) * $scope.pagination.numPerPage) + $scope.pagination.numPerPage)
)
return true; //return true if item index is on the currentPage
return false;
};
}]);HTML 에서 페이지 매김 필터 ngRepeat 이전에 필터를 적용해야합니다 .
<table data-ng-controller="myController">
<tr data-ng-repeat="item in list | filter: searchFilter | filter: paginationFilter track by $index">
<td>
{{item}}
</td>
<tr>
</table>
<ul class="pagination-sm"
uib-pagination
data-boundary-links="true"
data-total-items="pagination.totalItems"
data-items-per-page="pagination.numPerPage"
data-ng-model="pagination.currentPage"
data-previous-text="‹"
data-next-text="›"
data-first-text="«"
data-last-text="»">
</ul>