Introduction
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}}
$filter('limitTo')(input, limit, begin)
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).
Example:-
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>
<script>
var myapp=angular.module("myapp",[]);
myapp.controller("myappcont",function($scope){
$scope.noofrows=5;
$scope.students=[
{Name:"Kailash",Sex:"Male",Class:"1Std",Section:"A"},
{Name:"Kalyan",Sex:"Male",Class:"1Std",Section:"A"},
{Name:"Kalyani",Sex:"Female",Class:"1Std",Section:"A"},
{Name:"Kamal",Sex:"Male",Class:"2Std",Section:"B"},
{Name:"Keshav",Sex:"Male",Class:"2Std",Section:"B"},
{Name:"KedarGouri",Sex:"Female",Class:"2Std",Section:"B"}];
});
</script>
<BODY ng-controller="myappcont">
<h2>Student Details</h2>
<hr/>
<table border="1">
<caption>
Display No of Rows<input type="number" step=1 min=1 max=6 ng-model="noofrows"/><br/><br/>
</caption>
<tr>
<th>Name</th>
<th>Sex</th>
<th>Class</th>
<th>Section</th>
</tr>
<tr ng-repeat="student in students | limitTo:noofrows">
<td>{{student.Name}}</td>
<td>{{student.Sex | |limitTo:1}}</td>
<td>{{student.Class}}</td>
<td>{{student.Section}}</td>
</tr>
</table>
</BODY>
</HTML>
Summary
In this article we demonstrated how to use limitTo filter, hope this article may helpful to you. Please give comment for improving articles.
Thanks
Tags
AngularJS