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.
{{ 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
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.
Simple
example :
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp"
ng-controller="myController">
<ul>
<li ng-repeat="name in names
| limitTo : +3">{{name}}</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myController', function($scope) {
$scope.names = ["Axel", "Mark", "Shown", "June", "Eric"];
});
</script>
</body>
</html>
In above example “limitTo” filter used
which display first three records only.
Complex
Example :
<!DOCTYPE html PUBLIC "-//W3C//DTD
HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=ISO-8859-1">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<title>Row Limi Example</title>
<link href="Styles.css"
rel="stylesheet"/>
<script>
var
app = angular.module("myModule", []);
app.controller("myController", function($scope){
var
employees = [
{firstName: "Linda", lastName: "Anderson", dob: new Date("November 21, 1997"), gender: "Female", salary: 80000.45 },
{firstName: "axel",
lastName: "Blez", dob: new Date("June 10, 1996"), gender: "Male", salary: 59000.98 },
{firstName: "Mark",
lastName: "Avence", dob: new Date("May 5, 1995"), gender: "Male", salary: 45000 },
{firstName: "shown", lastName: "Frost", dob: new Date("October 17, 1994"), gender: "Male", salary: 35000 },
];
$scope.employees =
employees;
$scope.rowLimit
= 3;
});
</script>
</head>
<body>
<div ng-app="myModule"
ng-controller="myController">
Row Limit : <input type="number"
step="1" min="0"
max="5" ng-model="rowLimit"
/>
<br><br><table>
<thead>
<tr>
<th>FirstName</th>
<th>LastName</th>
<th>Date Of Birth</th>
<th>Gender</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="employee in
employees | limitTo:rowLimit ">
<td>{{ employee.firstName | uppercase
}}</td>
<td>{{ employee.lastName | lowercase
}}</td>
<td>{{ employee.dob | date: "dd/MM/yyyy"
}}</td>
<td>{{ employee.gender | lowercase
}}</td>
<td>{{ employee.salary | currency
}}</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Style.css
File
body
{
font-family:
Arial;
}
table{
border-collapse: collapse;
}
td{
border: 1px solid
black;
padding:
5px;
}
th
{
border: 1px solid
black;
padding:
5px;
text-align:
left;
}
Explaination
:
Row Limit : <input type="number"
step="1" min="0"
max="5" ng-model="rowLimit"
/>
Min and max shows the minimum and maximum
values. Ng-model “rowLimit” bind textbox data with “limitTo” filter and display
the number of records equal to the number in the textbox.
