The limitTo filter in AngularJS is used to return an array or a string that contains a specified number of elements. This filter can be used with arrays, strings, and numbers. The basic principle, however, remains the same in all three cases:
- For arrays, it returns an array containing only the specified number of items.
- When used for strings, it returns another string containing the specified number of characters.
- In the case of numbers, it returns a string containing only the specified number of digits.
- Negative numbers are used to return elements starting from the end of the element, instead of the beginning.
Syntax
{{ object | limitTo : limit : begin }}Parameter values
- limit: It represents the number of returned elements.
- begin: It specifies the beginning point of limitation & its default is 0.
Example 1: This example describes the basic usage of the limitTo Filter in AngularJS.
HTML
<!DOCTYPE html><html>
<head>
<script src=
</script>
</head>
<body style="text-align:center">
<h1 style="color:green">
GeeksforGeeks
</h1>
<h3>AngularJS limitTo Filter</h3>
<div ng-app="myApp" ng-controller="myCtrl">
<strong>Input:</strong><br>
<input type="text" ng-model="string">
<br><br>
<strong>Output:</strong><br>
{{string|limitTo:4}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope) {
$scope.string = "";
});
</script>
</body>
</html>
|
Output:
Example 2: In this example, we can see that the limit in the ‘firstName’ expression has been specified as 8. Therefore it doesn’t matter how long the first name of the user is, only the first 8 characters of the first name will be displayed.
HTML
<!DOCTYPE html><html>
<head>
<script src=
</script>
</head>
<body style="text-align:center">
<h1 style="color: green">
GeeksforGeeks
</h1>
<h3>AngularJS limitTo Filter</h3>
<div ng-app="myApp" ng-controller="myCtrl">
<strong>Input:</strong><br>
<input type="text" ng-model="firstName">
<br><br>
<strong>Output:</strong><br>
{{firstName|limitTo:8}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope) {
$scope.firstName = "";
});
</script>
</body>
</html>
|
Output: