Here we will learn what is limitto filter in angularjs, uses of limitto filter in angularjs and how to use limitto filter in angularjs application to limit number of elements showing in array or string or number from beginning or end based on the value specified in limitto filter.
In angularjs, limitto filter is used to get new array or string with a specified number of elements. 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.
Following is the syntax of using limitto filter in angularjs applications to get elements from beginning
E.g, Suppose we have one array which contains elements like samarry = [20,10,43,5,1,4,6] and we defined expression like {{ samarry | limitTo : 3 }} it will return elements from beginning and result like [20,10,43].
In case if we want to get elements from end means our limitTo filter syntax will be like as shown below
For example, we have one array which contains elements like samarry = [20,10,43,5,1,4,6] and we defined expression like {{ samarry | limitTo : -3 }} it will return elements from end and result like [1,4,6]. Now we will see complete example of using limitTo filter in angularjs application.
Following is the example of using limitTo filter in angularjs applications.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
AngularJs limitTo Filter to Limit Number of Elements
</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script>
var app = angular.module("AngularfilterApp", []);
app.controller("filterctrl", function ($scope) {
$scope.samarry = [20, 10, 43, 5, 1, 4, 6]
$scope.samstr = "tutlane.com";
});
</script>
</head>
<body ng-app="AngularfilterApp">
<div ng-controller="filterctrl">
Default Array : {{samarry}}<br /><br />
LimitTo Get Elements from Beginning:{{samarry | limitTo : 3}}<br /><br />
LimitTo Get Elements from Ending:{{samarry | limitTo : -3}}<br /><br />
Get Elements from String : {{samstr | limitTo : 4}}
</div>
</body>
</html>
If you observe above code we are limiting our string and array elements to display in our angularjs applications. Now we will run and see the output this angularjs application.
Following is the result of limitTo filter example in angularjs.
This is how we can use limitto filter in angularjs application to limit the number of elements showing on page based on our requirements.