Kailash's Blogs

AngularJS limitTo Filter

Kailash Chandra Behera | Friday, February 03, 2017
Kailash's Blogs


In My previous article, we demonstrated how to use filter in AngularJS. This article demonstrates how to use limitTo Filter.

Getting Started

The limitTo filter enable to filter in collection. We can limit the record or items in a collection to display,even this filter can be applied in string variable.As like any other filter it can be used in expression, directive and javascript.
Syntax in HTML

 {{ limitTo_expression | limitTo : limit : begin}}  
Syntax in Javasctipt
 $filter('limitTo')(input, limit, begin)  
limitTo filter can be used in collection, string and numbers,if limitTo filter uses in collection, it returns a collection a collection with specified number of items and when it uses in string, it returns a string with specified number of character. When uses in number, it returns a number with specified number of digits.

When it is using in Html, it takes two-parameter and the second parameter is optional. The first parameter is taken numeric value to limit the number of records to display if it is a positive number of items from the beginning of the source collection are copied and if a negative number of items from the end of the source collection are copied.

When a limit to filter is using in javascript, it takes three-parameter, the first parameter is a collection(input) or string(input), and the remaining parameter is the same as using in expression in HTML.

if the last parameter(begin) indicates Index at which to begin limitation and if it is negative, it indicates an offset from the end of collection(input).


This example displays list of students with data (Name, male, class etc.) in a table. It uses a numeric input control to filter number of students to display in page. By default it display 5 students data in table, increase and decrease the value of numeric field to see the filter result. When you will decrease the value of numeric field, the record from table will be removed automatically and when you will increase the value of numeric field record will be added into table automatically.
 <HTML ng-app = "myapp">  
      <TITLE> AngularJS learning(limitTo Filter)</TITLE>  
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>  
           var myapp=angular.module("myapp",[]);  
      <BODY ng-controller="myappcont">  
           <h2>Student Details</h2>  
           <table border="1">  
           Display No of Rows<input type="number" step=1 min=1 max=6 ng-model="noofrows"/><br/><br/>  
                <tr ng-repeat="student in students | limitTo:noofrows">  
                     <td>{{student.Sex | |limitTo:1}}</td>  


In this article we demonstrated how to use limitTo filter, hope this article may helpful to you. Please give comment for improving articles.