Menu ▼


AngularJS limitTo filter example

AngularJS limitTo filter returns new Array or string containing a specified number of elements. And we can specify the elements need to take from the beginning of the source or end of the source.

Example:
  • Input Array= [10,8,6,4,9,2]

    Limt element to
    Form starting -> {{ intary | limitTo : arylimit }}
    {{ intary | limitTo : arylimit }} Form ending -> {{ intary | limitTo : -arylimit }}
    {{ intary | limitTo : -arylimit }}
  • Input String= Welcome to Dotnet Learners

    Limt string to
    Form starting -> {{ strinput | limitTo : strlimit }}
    {{ strinput | limitTo : strlimit }} Form ending -> {{ strinput | limitTo : -strlimit }}
    {{ strinput | limitTo : -strlimit }}

Source code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        .exmpul li
        {
            padding-bottom: 10px;
        }
        .exmpul span
        {
            padding: 5px;
            display: block;
            background: #ccc;
            margin: 10px 10px 20px 10px;
        }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
</head>
<body>
    <div ng-app="SampleApp" ng-controller="SampleCntrl">
        <ul class="exmpul">
            <li>Input Array= <strong>[10,8,6,4,9,2]</strong>
                <br />
                <br />
                Limt element to
                <input type="text" ng-model="arylimit" /><br />
                Form starting ->  <strong>{{ <em>intary | limitTo : arylimit </em>}}</strong>
                <br />
                <span>{{ intary | limitTo : arylimit }}</span> Form ending ->  <strong>{{ <em>intary
                    | limitTo : -arylimit </em>}}</strong>
                <br />
                <span>{{ intary | limitTo : -arylimit }}</span> </li>
            <li>Input String= <strong>Welcome to Dotnet Learners</strong>
                <br />
                <br />
                Limt string to
                <input type="text" ng-model="strlimit" /><br />
                Form starting ->  <strong>{{ <em>strinput | limitTo : strlimit </em>}}</strong>
                <br />
                <span>{{ strinput | limitTo : strlimit }}</span> Form ending -> <strong>{{ <em>strinput
                    | limitTo : -strlimit </em>}}</strong>
                <br />
                <span>{{ strinput | limitTo : -strlimit }}</span> </li>
        </ul>
    </div>
    <script>
        var myapp = angular.module("SampleApp", []);
        myapp.controller("SampleCntrl", function ($scope) {
            $scope.intary = [10, 8, 6, 4, 9, 2];
            $scope.arylimit = 3;
            $scope.strinput = "Welcome to Dotnet Learners";
            $scope.strlimit = 10;
        });
    </script>
</body>
</html>





comments powered by Disqus


Search dotnetlearners.com