Question

我有一个显示项目列表的网页，项目数量可以变得非常大，所以我想一次只显示3个，并且有下一个\上一个按钮，让用户在项目之间导航。

我对Angular很新，但我设法检索所有项目并在UI上显示它们但不知道从哪里开始只显示三个并连接下一个和上一个按钮以启用导航。 / p>

这是我的代码：

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/

使用angular的简单上一个\下一个滑块

1 个答案: