AngularJS Sort Array in Ascending Order Using Orderby Filter

In this AngularJS orderby filter example you will learn how to sort array in ascending order using orderby 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[] | orderBy:'<fieldName>'}}

AngularJS Sort Array in Ascending Order Using Orderby Filter Example

<!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 Sort array in ascending order 
	using orderby filter Example</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 Sort array in ascending order 
	using orderby filter Example</legend>             
  <div ng-app="app">     
    <div ng-controller="ParentController">  
      <ul ng-repeat="emp in employees | orderBy:'firstName'">  
        <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