Implement limitTo Filter with example in AngularJS

Last Reply 12 days ago By dharmendr

Posted 12 days ago

How to implement limitTo Filter in AngularJS.

Posted 12 days ago Modified on 12 days ago

Hi rani,

The limitTo filter returns an array or a string containing only a specified number of elements.

When the limitTo filter is used for arrays it returns an array containing only the specified number of items.

When the limitTo filter is used for strings it returns a string containing only the specified number of characters.

When the limitTo filter is used for numbers it returns a string containing only the specified number of digits.

Use negative numbers to return elements starting from the end of the element instead of the beginning.

Syntax

{{ object | limitTo : limit : begin }}

limit : A number, specifying how many elements to return.

begin : Optional. A number specifying where to begin the limitation. Default is 0.

Example

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
    <script type="text/javascript">
        var app = angular.module('MyApp', [])
        app.controller('MyController', function ($scope) {
            $scope.Customers = [{ CustomerId: 1, Name: "John Hammond", Country: "United States" },
                                { CustomerId: 2, Name: "Mudassar Khan", Country: "India" },
                                { CustomerId: 3, Name: "Suzanne Mathews", Country: "France" },
                                { CustomerId: 4, Name: "Robert Schidner", Country: "Russia"}];
        });
    </script>
</head>
<body>
    <div ng-app="MyApp" ng-controller="MyController">
        <table border="1" cellpadding="1" cellspacing="1">
            <tr>
                <th>Customer Id</th>
                <th>Name</th>
                <th>Country</th>
            </tr>
            <tbody ng-repeat="m in Customers | limitTo : 3">
                <tr>
                    <td>{{m.CustomerId}}</td>
                    <td>{{m.Name}}</td>
                    <td>{{m.Country}}</td>
                </tr>
            </tbody>
        </table>
        <hr />
        <table border="1" cellpadding="1" cellspacing="1">
            <tr>
                <th>Customer Id</th>
                <th>Name</th>
                <th>Country</th>
            </tr>
            <tbody ng-repeat="m in Customers | limitTo : 3 : 2">
                <tr>
                    <td>{{m.CustomerId}}</td>
                    <td>{{m.Name}}</td>
                    <td>{{m.Country}}</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>

Demo

For more details refer below links.

AngularJS limitTo Filter