Merhaba, Angular'ın UI Önyükleme sayfalama yönergesine sahip sunucu taraflı sayfalama yapmak istiyoruz. Sayfaları sunucularımızdan sunmak için RESTful bir son nokta nasıl oluşturacağımızı biliyoruz, ancak bu son noktayı Angular'ın UI Bootstrap sayfalandırma yönergesine nasıl bağlayacağımıza dair bir belge görmedik. Oldukça -Angular'in UI Bootstrap sayfalandırma yönergesine sahip sunucu tarafı çağrılarını nasıl yapabilirsiniz?
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>bu api bağlantısının artık çalışmıyor. Lütfen güncelleyin –
AngularUI Bootstrap'in (1.3.2) son sürümü, '
@sylwester Öğeleri atlamak gibi istek göndermem gerekiyor. örneğin "apiUrl? skip = 10", ilk 10'u atlayacağı anlamına gelir. Böylece, angular-ui önyükleme programını kullanarak nasıl yapılacağı – codelearner
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>
http://angular-ui.github.io/bootstrap/#/pagination altındaki küçük demo bakın detaylı - model geçerli sayfadır, bu yüzden her değişiklik olayı, sunucuya geri bir istekte bulunun, bu sayfa için liste alın ve onu görüntüleyin. senin kapsayıcın. – tymeJV
Bağlantı için teşekkürler! –