In this AngularJS limitto filter example you will learn how to display fixed element from array using limitto filter.
Here you can view the output of the example and you can also "try it yourself" by clicking on "Live Demo" button given at the bottom.
Syntax
{{Array[] | limitTo:5}}
<!DOCTYPE html>
<html>
<head> <!-- www.techstrikers.com -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.1/angular.min.js"></script>
<meta charset="utf-8">
<title>AngularJS Display fixed element from array
using limitto filter</title>
<script>
var app = angular.module('app', []);
app.controller("ParentController", function ($scope) {
$scope.employees = [{
firstName:"Jimi",
lastName:"Scott",
jobTitle:"Developer",
salary:20000,
phone:"345-333-7845"
},
{
firstName:"Bailey",
lastName:"Lee",
jobTitle:"Lead",
salary:30000,
phone:"322-121-213"
},
{
firstName:"Aura",
lastName:"Martin",
jobTitle:"QA",
salary:35000,
phone:"322-333-0987"
},
{
firstName:"Austin",
lastName:"Williams",
jobTitle:"Designer",
salary:20000,
phone:"322-265-2321"
},
{
firstName:"Bara",
lastName:"Miller",
jobTitle:"Tester",
salary:15000,
phone:"322-890-2321"
},{
firstName:"Carlton",
lastName:"Taylor",
jobTitle:"Manager",
salary:45000,
phone:"322-456-2321"
},
{
firstName:"Adisa",
lastName:"White",
jobTitle:"Developer",
salary:25000,
phone:"121-333-2321"
}];
});
</script>
</head>
<body style="background-color:#DDE4E9;">
<fieldset style="background-color:#DDE4E9;">
<legend>AngulerJS Display fixed element from array
using limitto filter</legend>
<div ng-app="app">
<div ng-controller="ParentController">
<ul ng-repeat="emp in employees | limitTo:5">
<li>Name : {{ emp.firstName + ' ' + emp.lastName }}</li>
<li>Job Title : {{ emp.jobTitle }}</li>
<li>Salary : {{ emp.salary }}</li>
<li>Phone : {{ emp.phone }}</li>
</ul>
</div>
</div>
</div>
</fieldset>
</body>
</html>