AngularJS limitTo Filter

Last Updated : 19 Oct, 2023

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=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
    </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=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
    </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:

AngularJS lowercase Filter

sanchit496

Improve

Article Tags :

AngularJS limitTo Filter

Syntax

Parameter values

Similar Reads

AngularJS Basics

AngularJS Directives

AngularJS Filters

AngularJS Converting Functions

AngularJS Comparing Functions

AngularJS Questions

Thank You!

What kind of Experience do you want to share?