We can easily apply paging on our page using AngularJs and bootstrap. Here, below is the example of this:
In View:
<div ng-app="angularPagingSample">
<div ng-controller="PagingController">
<h1>Angular Paging</h1>
<div ng-repeat="question in filteredQuestions">
<div class="label label-warning">Question {{currentPage}} of {{totalItems}}.</div>
<div class="row">
<div class="col-md-12">
<h2>{{currentPage}}.{{question.Question}} <span ng-bind-html="question.Question"></span></h2>
</div>
</div>
<div class="row text-left options">
<input type="text" ng-model="question.Answer" class="form-control form-group" />
</div>
</div>
<div data-pagination="" data-num-pages="totalPageCount" data-current-page="currentPage" data-max-size="maxSize" data-boundary-links="true"></div>
</div>
</div>
Add these scripts in View:
@section Scripts {
@Scripts.Render("~/bundles/jqueryval") //other js fille
<script src="~/Scripts/Angular/PagingSample.js"></script> //angular controller file
<link data-require="bootstrap-css@2.3.2" data-semver="2.3.2" rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" /> //for paging css
<script data-require="angular-ui-bootstrap@0.3.0" data-semver="0.3.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.3.0.min.js"></script> //for paging js
}
PagingSample.js
var app = angular.module('angularPagingSample', ['ui.bootstrap']); //ui.bootstrap is required for paging
app.controller("PagingController", function ($scope, $http) {
$scope.pageCount = function () {
return Math.ceil($scope.res.length / $scope.itemsPerPage);
};
var init = function () {
var response = $http({
method: 'GET',
url: '/api/Home/GetQuestions' // get all data
});
response.success(function (data) {
$scope.res = data;
$scope.questions = $scope.res;
$scope.totalItems = $scope.res.length; //get total record count
$scope.itemsPerPage = 1;
$scope.currentPage = 1;
$scope.filteredQuestions = $scope.res;
$scope.$watch('currentPage + itemsPerPage', function () {
var begin = (($scope.currentPage - 1) * $scope.itemsPerPage),
end = begin + $scope.itemsPerPage;
$scope.filteredQuestions = $scope.res.slice(begin, end);
});
$scope.totalPageCount = $scope.pageCount();
});
}
init();
});
Hope, this code will help you. Thanks
0 Comment(s)