gpt4 book ai didi

angularjs - 如何使用 Angular 的 UI Bootstrap 分页指令进行服务器端分页

转载 作者:行者123 更新时间:2023-12-02 22:15:09 25 4
gpt4 key购买 nike

您好,我们想要使用 Angular 的 UI Bootstrap 分页指令进行服务器端分页。我们知道如何创建 RESTful 端点来从我们的服务器提供页面,但没有看到任何有关如何将该端点连接到 Angular 的 UI Bootstrap 分页指令的文档。

最佳答案

请参阅下面的小演示

angular.module('app', ['ui.bootstrap']);
angular.module('app').controller('PaginationDemoCtrl', function($scope, $http) {

$scope.currentPage = 1;
$scope.limit= 10;


$scope.tracks = [];
getData();


function getData() {
$http.get("https://api.spotify.com/v1/search?query=iron+&offset="+($scope.currentPage-1)*$scope.limit+"&limit=20&type=artist")
.then(function(response) {
$scope.totalItems = response.data.artists.total
angular.copy(response.data.artists.items, $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" style="list-style:none">
<img ng-src="{{track.images[2].url}}" alt="" width="160"/>
{{track.name}}</li>
</ul>

</div>
</body>

关于angularjs - 如何使用 Angular 的 UI Bootstrap 分页指令进行服务器端分页,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28201764/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com