上一页和下一页是Angular

Question

我正在我的主页上建立一个网站。我从JSON中获取了一些数据并显示了所有数据。它包括一系列专辑，其中包括专辑标题，专辑艺术家等。当我点击一个专辑时，它会通过角度发送另一个对api的调用，并抓取该专辑的数据并显示它。

在这个页面上，我希望有“上一个”和“下一个”按钮来显示以前的专辑数据和下一个专辑

我不知道该怎么做

这是专辑/主页......

<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 &amp; 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];
    });
});