AngularJS orderBy filter example


AngularJS orderBy filter is used sort arrays and list objects. In this article we will see

  • Sort an array in ascending and descending
  • Fill table using AngularJS ng-repeat directive on table row. and when user click on the table we will sort the table data using orderBy filter

Example:
  • Input Array= [10,8,6,4,9,2]
  • Array in ascending order -> -> {{ intary | orderBy : '' }}
    {{ intary | orderBy : '' }}
  • Array in descending order -> -> {{ intary | orderBy : '' : true }}
    {{ intary | orderBy : '' :true }}
  • Student List= [
    { Name: "James", Marks: "980", Grade : "A" },
    { Name: "Steave", Marks: "863", Grade: "B" },
    { Name: "Mark", Marks: "695", Grade: "D" },
    { Name: "Smith", Marks: "776", Grade: "C" },
    { Name: "Rahul", Marks: "801", Grade: "B" },
    { Name: "William", Marks: "740", Grade: "C" },
    { Name: "Raman", Marks: "880", Grade: "B" },
    { Name: "Raju", Marks: "990", Grade: "A" }];

    Table with sortable colurmns, click on the header field to sort.

    Name Marks Grade
    {{ student.Name}} {{ student.Marks}} {{ student.Grade}}

Source code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> .exmpul li { padding-bottom: 10px; } .exmpul span { padding: 5px; display: block; background: #ccc; margin: 10px 10px 20px 10px; } .tblstudents { border-collapse: collapse; border: solid 1px #ccc; } .tblstudents th, .tblstudents td { border: solid 1px #ccc; padding: 5px; } .tblstudents th { text-decoration: underline; cursor: pointer; } .sortclass { color: Blue; } </style> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script> </head> <body> <div ng-app="SampleApp" ng-controller="SampleCntrl"> <ul class="exmpul"> <li>Input Array= <strong>[10,8,6,4,9,2]</strong> </li> <li>Array in ascending order -> -> <strong>{{ <em>intary | orderBy : '' </em>}}</strong> <br /> <span>{{ intary | orderBy : '' }}</span> </li> <li>Array in descending order -> -> <strong>{{ <em>intary | orderBy : '' : true </em> }}</strong> <br /> <span>{{ intary | orderBy : '' :true }}</span> </li> <li>Student List= [<br /> { Name: "James", Marks: "980", Grade : "A" },<br /> { Name: "Steave", Marks: "863", Grade: "B" },<br /> { Name: "Mark", Marks: "695", Grade: "D" },<br /> { Name: "Smith", Marks: "776", Grade: "C" },<br /> { Name: "Rahul", Marks: "801", Grade: "B" },<br /> { Name: "William", Marks: "740", Grade: "C" },<br /> { Name: "Raman", Marks: "880", Grade: "B" },<br /> { Name: "Raju", Marks: "990", Grade: "A" }];<br /> <br /> <strong>Table with sortable colurmns, click on the header field to sort.</strong> <br /><br /> <table class="tblstudents"> <thead> <tr> <th ng-click="sortlist('Name');" ng-class="{sortclass : sortorder=='Name' }"> Name </th> <th ng-click="sortlist('Marks');" ng-class="{sortclass : sortorder=='Marks' }"> Marks </th> <th ng-click="sortlist('Grade');" ng-class="{sortclass : sortorder=='Grade' }"> Grade </th> </tr> </thead> <tbody> <tr ng-repeat="student in studentlist | orderBy : sortorder"> <td> {{ student.Name}} </td> <td> {{ student.Marks}} </td> <td> {{ student.Grade}} </td> </tr> </tbody> </table> </li> </ul> </div> <script> var myapp = angular.module("SampleApp", []); myapp.controller("SampleCntrl", function ($scope) { $scope.intary = [10, 8, 6, 4, 9, 2]; $scope.studentlist = [ { Name: "James", Marks: "980", Grade: "A" }, { Name: "Steave", Marks: "863", Grade: "B" }, { Name: "Mark", Marks: "695", Grade: "D" }, { Name: "Smith", Marks: "776", Grade: "C" }, { Name: "Rahul", Marks: "801", Grade: "B" }, { Name: "William", Marks: "740", Grade: "C" }, { Name: "Raman", Marks: "880", Grade: "B" }, { Name: "Raju", Marks: "990", Grade: "A" } ]; $scope.sortlist = function (order) { $scope.sortorder = order; }; $scope.sortlist('Name'); }); </script> </body> </html>