你该怎么办服务器端分页与角的UI分页引导指令 [英] How can you do server side paging with Angular's UI Bootstrap pagination directive
本文介绍了你该怎么办服务器端分页与角的UI分页引导指令的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我们想要做的服务器端分页与角的UI分页引导指令。我们知道如何创建一个RESTful端点服务从我们的服务器上的网页，但没有看到有关如何挂钩端点到角的UI分页引导指令任何单证。
解决方案
请参见下面的
示范小
\r
\r\r
\r angular.module（'应用'，['ui.bootstrap']）;\r
angular.module（应用）。控制器（'PaginationDemoCtrl'，函数（$范围，$ HTTP）{\r
\r
$ scope.currentPage = 1;\r
\r
$ scope.tracks = [];\r
的getData（）;\r
\r
\r
函数的getData（）{\r
$ http.get（https://ws.spotify.com/search/1/track.json?q=kaizers+orchestra&page=+ $ scope.currentPage）\r
。然后（功能（响应）{\r
$ scope.totalItems = response.data.info.num_results\r
angular.copy（response.data.tracks，$ scope.tracks）\r
\r
\r
}）;\r
}\r
\r
//获取页面上的数据的另一个部分改变\r
$ scope.pageChanged =功能（）{\r
的getData（）;\r
};\r
\r
\r
}）; \r
＆LT;脚本SRC =https://ajax.googleapis.com/ajax /libs/angularjs/1.2.23/angular.min.js\"></script>\r
\r
\r
＆LT;脚本的src =// angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.js\"></script>\r
\r
＆LT;链接HREF =// netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css的rel =stylesheet属性＆GT;\r
\r
＆LT;机身NG-应用=应用程序＆GT;\r
\r
＆LT; DIV NG控制器=PaginationDemoCtrl＆GT;\r
＆LT; H4＆GT;样品服务器分页＆LT; / H4＆GT;\r
\r
＆LT;分页总项=TOTALITEMSNG模型=当前页NG变化=pageChanged（）项目的单页=100＆GT;＆LT; /分页＆GT;\r
＆LT; UL＆GT;\r
＆LT;李NG重复=轨道，轨道＆GT; {{track.name}}＆LT; /李＆GT;\r
＆LT; / UL＆GT;\r
\r
＆LT; / DIV＆GT;\r
＆LT; /身体GT; \r
Hi we are wanting to do server side paging with Angular's UI Bootstrap pagination directive. We know how to create a RESTful endpoint to serve up the pages from our servers but didn't see any documentations about how to hook that endpoint up to Angular's UI Bootstrap pagination directive.
解决方案
Please see small demo below
angular.module('app', ['ui.bootstrap']);
angular.module('app').controller('PaginationDemoCtrl', function($scope, $http) {
$scope.currentPage = 1;
$scope.tracks = [];
getData();
function getData() {
$http.get("https://ws.spotify.com/search/1/track.json?q=kaizers+orchestra&page=" + $scope.currentPage)
.then(function(response) {
$scope.totalItems = response.data.info.num_results
angular.copy(response.data.tracks, $scope.tracks)
});
}
//get another portions of data on page changed
$scope.pageChanged = function() {
getData();
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<body ng-app="app">
<div ng-controller="PaginationDemoCtrl">
<h4>Sample Server Pagination</h4>
<pagination total-items="totalItems" ng-model="currentPage" ng-change="pageChanged()" items-per-page="100"></pagination>
<ul>
<li ng-repeat="track in tracks">{{track.name}}</li>
</ul>
</div>
</body>
这篇关于你该怎么办服务器端分页与角的UI分页引导指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
