user6440175 user6440175 - 3 months ago 17
AngularJS Question

Limit data set in Angular

I am trying to display only the first 5 records on load. This is the angular service that is generating the data set. How can I do that?

myApp.service('allCurrentSettingsService', ['$http', '$q', function ($http, $q) {
var allSettings = null;
this.getList = function () {
var def = $q.defer()
if (allSettings) {
def.resolve(allSettings);
} else {
$http.post('GetAllCurrentSettings')
.then(function (response) {
var response = $.parseJSON(response.data)
allSettings = response;
def.resolve(allSettings);
});
}
return def.promise;
}
}]);

Answer

You have to use a scope variable

$scope.limit = 5;

Then, use LimitTo filter in HTML file for initial loading like

ng-repeat="data in query | limitTo:limit"

After that, if you want to load more records on the click of some button or scroll till last of the page, you can write the below code on appropriate event

$scope.increseLimit = function()
{
  $scope.limit+=5;
}
Comments