javascript - 使用 Angular 简单上一个\下一个 slider

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/