[C#]使用角的简单 previous\next 滑块

发布时间: 2017/2/24 2:49:46
注意事项: 本文中文内容可能为机器翻译,如要查看英文原文请点击上面连接.

我有一个 web 页,其中显示的项目列表,项的数目可以得到相当大,因此我想要一次显示只有 3,有 next\previous 按钮,让用户导航项之间。

我是很新的角,但我设法检索所有项和在 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>

解决方法 1:

您可以使用筛选器比值属性

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

参考此 jsfiddle,帮助您更好地理解。

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

赞助商