AngularJS | limitTo Filter

The limitTo filter in AngularJS is used to returns an array or a string which 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 the 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 }}

Parameters:



  • limit: Number of returned elements.
  • begin: Begin point of limitation. default is 0.

Example-1:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
<script src=
  </script>
  
<body>
  
    <h2>AngularJS - limitTO</h2>
    <br>
    <br>
  
    <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>

chevron_right


Output:

Let’s have a look at another example to make things more clear.
Example-2:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
<script src=
  </script>
  
<body>
  
    <h2>AngularJS - limitTO</h2>
    <br>
    <br>
  
    <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>

chevron_right


Output:

In this example, we can see that the limit in the ‘firstName’ expression has been specified to 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.



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.



Improved By : ManasChhabra2



Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.