Javascript 上一页和下一页是有角度的
我正在我的主页上建立一个网站。我从JSON中获取一些数据,并将其全部显示出来。它包括一组相册,其中包含相册标题、相册艺术家等字段。当我单击一张相册时,它会通过angular向api发送另一个调用,并获取该相册的数据并显示它 在这个页面上,我希望有“上一张”和“下一张”按钮来显示上一张相册数据和下一张相册 我不知道该怎么做 这是相册/主页Javascript 上一页和下一页是有角度的,javascript,angularjs,json,pagination,Javascript,Angularjs,Json,Pagination,我正在我的主页上建立一个网站。我从JSON中获取一些数据,并将其全部显示出来。它包括一组相册,其中包含相册标题、相册艺术家等字段。当我单击一张相册时,它会通过angular向api发送另一个调用,并获取该相册的数据并显示它 在这个页面上,我希望有“上一张”和“下一张”按钮来显示上一张相册数据和下一张相册 我不知道该怎么做 这是相册/主页 <section class="container-fluid music-section pad-bottom-60 pad-top-20 pad-to
<section class="container-fluid music-section pad-bottom-60 pad-top-20 pad-top-30-l">
<div class="clear album-collection">
<div class="row">
<div ng-repeat="albums in music">
<a href="/music/{{albums.slug}}" class="col-12 col-1-5-xl col-1-4-l col-1-2-m album-collection__cover transition">
<img ng-src='{{albums.better_featured_image.source_url}}'>
<div class="album-overlay">
<div class="album-overlay__text-container animate">
<div class="album-overlay-text">
<span>JMP-{{albums.acf.album_cat_no}}</span>
<br><br>
<h3>{{albums.title.rendered}}</h3>
<br><br>
<span>View Album</span>
</div>
</div>
</div>
</a>
</div>
</div>
</div>
</section>
<section class="container-fluid music-album-section pad-bottom-60">
<div class='clear row'>
<div class="col-2-5-l col-12 music-album__left-section">
<img class="pad-top-60-l pad-top-20 animate fade-in-left-big" ng-src='{{album.better_featured_image.source_url}}'>
</div>
<div class="col-1-2-l push-1-l col-12 music-album__right-section pad-top-60-l pad-top-20 pad-bottom-50 animate fade-in-big">
<a class="back-to-all-music-link pad-bottom-50" href="/music/"><img src="../img/left-arrow.png">All Albums</a>
<span class="animate fade-in-left-big track-numbers">{{album.acf.album_track_number}} Tracks</span>
<span class="animate fade-in-left-big catalogue-number">JMP-{{album.acf.album_cat_no}}</span>
<div class="row">
<div class="col-12 col-4-5-l pad-top-10">
<h1 class="animate fade-in-left-big music-album-title">{{album.title.rendered}}</h1>
<article class="pad-bottom-30 pad-top-10">
<p class="animate fade-in-left-big" ng-bind-html="album.content.rendered"></p>
</article>
</div>
<div class="col-1-3-l col-1-2 pad-top-30-l pad-bottom-60-l pad-bottom-20">
<button class="animate fade-in-left-big button-primary button-primary__big">
<img src= "./img/play-button.png">
<span>Play Montage</span>
</button>
</div>
<div class="col-1-3-l col-1-2 pad-top-30-l pad-bottom-60-l pad-bottom-20">
<button class="animate fade-in-left-big button-primary button-primary__big">
Listen & download
</button>
</div>
</div>
<div class="next-previous-album-links pad-top-30-l pad-top-40-s pad-bottom-20">
<a href="/music/"><img src="./img/left-arrow.png">Previous Album</a>
<a href="/music/" class="right">Next Album<img src="./img/right-arrow.png"></a>
</div>
</div>
</div>
</section>
angular.module('app', ['ngRoute', 'ngSanitize'])
.config(function ($routeProvider, $locationProvider) {
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
$routeProvider
.when('/', {
templateUrl: myLocalized.partials + 'main.html',
controller: 'Main'
})
.when('/music', {
templateUrl: myLocalized.partials + 'music.php',
controller: 'Music'
})
.when('/music/:slug/', {
templateUrl: myLocalized.partials + 'album.html',
controller: 'Album'
})
.otherwise({
redirectTo: '/'
});
})
.controller('Main', function ($scope, $http, $routeParams) {
$http.get('wp-json/wp/v2/posts/').success(function (res) {
$scope.posts = res;
});
})
.controller('Music', function ($rootScope, $scope, $http, $routeParams) {
$http.get('wp-json/wp/v2/post_music').success(function (res) {
$rootScope.music = res;
console.log($scope.music)
});
})
.controller('Album', function ($scope, $http, $routeParams, $rootScope) {
$http.get('wp-json/wp/v2/post_music/?filter[name]=' + $routeParams.slug).success(function (res) {
$scope.album = res[0];
});
});