javascript - Simple previous\next slider using angular -
i have web page displays list of items, number of items can quite big display 3 @ time , have next\previous buttons let user navigate between items.
i'm new angular managed retrieve items , display them on ui have no idea start display 3 , wire next , previous buttons enable navigation.
here's 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>
you can achieve using filters limitto property
> <li ng-repeat="datalist in datalists | pagination: curpage * pagesize > | limitto: pagesize">
refere jsfiddle understand better.
Comments
Post a Comment