使用angular的簡單上一個\\下一個滑塊

Question

我有一個顯示項目列表的網頁，項目數量可以變得很大，所以我想一次只顯示3個，並且有下一個\\前一個按鈕，讓用戶在項目之間導航。

我對Angular很新，但我設法檢索所有項目並在UI上顯示它們但不知道從哪里開始只顯示三個並連接下一個和上一個按鈕以啟用導航。

這是我的代碼：

JS：

var app = angular.module('myApp', []);
app.controller('servicesController', function ($scope, $http) {
    $http.get(url + "api/MapServiceAPI/GetServers")
    .success(function (response) {
        $scope.servers = response.Result;
    });
});

HTML：

<div class="row top-space" ng-app="myApp" ng-controller="servicesController">
    <div class="pull-left">
        <img src="~/Content/Images/Service/PREVIOUS.png" />
        <h4>PREVIOUS</h4>
    </div>
    <div class="pull-right">
        <img src="~/Content/Images/Service/NEXT.png" />
        <h4>NEXT</h4>
    </div>
    <ul class="col-md-3 text-center" ng-repeat="s in servers" ng-click="serviceClick(s.ServiceId)">
        <li>
            <div class="container">
                <h4>{{ s.ServerName }}</h4>
            </div>
            <div class="container">
                <img src="~/Content/Images/Server/SERVER.png" />
            </div>
            <div class="container">
                <h5>{{ s.ServerDescription }}</h5>
            </div>
        </li>
    </ul>
</div>

Answer 1

你可以實現使用過濾器limitTo屬性

> <li ng-repeat="datalist in datalists | pagination: curPage * pageSize
> | limitTo: pageSize">

引用這個jsfiddle，它可以幫助你更好地理解。

http://jsfiddle.net/dulcedilip/x7tg15v9/