AngularJS Display Fixed Element From Array Using Limitto Filter

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}}

Example Display Fixed element From Array

<!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>

See Live Example

« Previous