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]

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

    Limit 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 /> Limit 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 /> Limit 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>