AngularJS limitTo filter(Limiting the Number of Items)
Limiting the Number of Items
The limitTo filter restricts the number of items taken from an array of data objects, which can be useful when working with a layout that can accommodate only a certain number of items.
By using limitTo filter we can take elements either from beginning or end of array or string or number based on specified value by defining positive or negative value with limitTo filter.
Syntax of AngularJS LimitTo Filter:
Following is the syntax of using limitTo filter in AngulaJS applications to get elements from beginning.
{{limittoexpression | limitTo : limit}}
For example Suppose we have one array which contains elements like myArray = [10,20,35,5,1,4,5] and we defined expression like {{ myArray | limitTo : 3 }} it will return elements from beginning and result will be [10,20,35].
Limiting the Number of Items
The limitTo filter restricts the number of items taken from an array of data objects, which can be useful when working with a layout that can accommodate only a certain number of items.
By using limitTo filter we can take elements either from beginning or end of array or string or number based on specified value by defining positive or negative value with limitTo filter.
Syntax of AngularJS LimitTo Filter:
Following is the syntax of using limitTo filter in AngulaJS applications to get elements from beginning.
{{limittoexpression | limitTo : limit}}
For example Suppose we have one array which contains elements like myArray = [10,20,35,5,1,4,5] and we defined expression like {{ myArray | limitTo : 3 }} it will return elements from beginning and result will be [10,20,35].
In case if we want to get elements from end of the array then in this case limitTo filter syntax will be like as shown below.
{{limittoexpression | limitTo : -limit}}
For example Suppose we have one array which contains elements like myArray = [10,20,35,5,1,4,5] and we defined expression like {{ myArray | limitTo : -3 }} it will return elements from end and result will be [1,4,5].
Example
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script>
angular.module("exampleApp", [])
.controller("defaultCtrl", function ($scope) {
$scope.products = [
{ name: "Apples", category: "Fruit", price: 1.20 },
{ name: "Bananas", category: "Fruit", price: 1.10 },
{ name: "Pears", category: "Fruit", price: 3.12 },
{ name: "Chicken", category: "Meat", price: 10.23 },
{ name: "Fish", category: "Meat", price: 10.10 },
{ name: "Mutton", category: "Meat", price: 20.12},
{ name: "Beer", category: "Drinks", price: 2.00},
{ name: "Wine", category: "Drinks", price: 7.19},
{ name: "Whiskey", category: "Drinks", price: 15.99}
];
$scope.limitVal = "5";
$scope.limitRange = [];
for (var i = (0 - $scope.products.length);
i <= $scope.products.length; i++) {
$scope.limitRange.push(i.toString());
}
});
</script>
</head>
<body ng-app="exampleApp" ng-controller="defaultCtrl">
<div class="panel panel-default">
<div class="panel-heading">
<h3>
Products
<span class="label label-primary">{{products.length}}</span>
</h3>
</div>
<div class="panel-body">
Limit: <select ng-model="limitVal"
ng-options="item for item in limitRange"></select>
</div>
<div class="panel-body">
<table class="table table-striped table-bordered table-condensed">
<thead>
<tr>
<td>Name</td>
<td>Category</td>
<td>Price</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="p in products | limitTo:limitVal">
<td>{{p.name}}</td>
<td>{{p.category}}</td>
<td>{{p.price | currency }}</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
In the above example I have used the limitTo filter to restrict the ng-repeat directive so that it operates only on the first five objects in the products array, as shown below.
Try it:
Again I specified the value for the limitTo filter as a variable to demonstrate what happens when you specify negative values. Our html file contains a select element whose ng-options attribute is set to an array of values that I create like this:
for (var i = (0 - $scope.products.length); i <= $scope.products.length; i++) {
$scope.limitRange.push(i.toString());
}
There are nine data objects in the products array, which means that the select element contains option elements from -9 through to 9. If you configure the limitTo filter with a positive number—such as 5, in the figure—then the filter selects the first five objects from the array. However, if you select a negative value, such as -5,for example, then the filter selects the last five objects in the array. You can see the effect in below image.
Try it:
References :- AngulaJS Documentation
Related Articles
