javascript - Simple previous\next slider using angular

I have a web page which displays a list of items, the number of items can get quite big so I would like to display only 3 at a time and have next\previous buttons which let the user navigate between items.

I'm very new to Angular but I managed to retrieve all the items and display them on the UI but have no idea where to start to only display three and wire up the next and previous buttons to enable navigation.

Here's my code:

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 Answer

  1. Peter- Reply

    2019-11-16

    you can achieve using filters limitTo property

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

    refere this jsfiddle which help you to understand better.

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

Leave a Reply

Your email address will not be published. Required fields are marked *

You can use these HTML tags and attributes <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>