AngularJS limitTo Filter with Example

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.

AngularJS 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.

Syntax of AngularJS LimitTo Filter

Following is the syntax of using limitto filter in angularjs applications to get elements from beginning

 

{{limittoexpression | limitTo : limit}}

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

 

{{limittoexpression | limitTo : -limit}}

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.

AngularJS limitTo Filter Example

Following is the example of using limitTo filter in angularjs applications.

 

Live Preview

<!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.

Output of AngularJS limitTo Filter Example

Following is the result of limitTo filter example in angularjs.

 

Angularjs LimitTo Filter Example output or result

 

This is how we can use limitto filter in angularjs application to limit the number of elements showing on page based on our requirements.