Post
Ask Question

OrderBy Filter In Angular

Introduction

This write-up demonstrates how to use AngularJS orderBy filter.

Getting Started

AngularJS orderBy filter allows sorting of data in a collection. It supports both, ascending and descending order. The "+" operator is used to order the data in ascending order and thde "-" operator is used to order the data in descending order. "true" and "false" are also used to order the data in ascending and descending order in collection. If no operator is mentioned, it orders the data in ascending order.

Example
  1. <tr ng-repeat="student in students | orderBy:+Name"> //orders in asc    
  2.  <tr ng-repeat="student in students | orderBy:-Name">//orders in desc    
  3.  <tr ng-repeat="student in students | orderBy:Name:true">//orders in asc    
  4.  <tr ng-repeat="student in students | orderBy:Name:false">//orders in desc    
  5.  <tr ng-repeat="student in students | orderBy:Name">//orders in asc  

Syntax in HTML 

{{ orderBy_expression | orderBy : expression : reverse : comparator}} 

Example

This example displays a list of students in a table and has taken a drop-down box to order the student list in ascending or descending order. This drop-down box contains the names of columns as items, two items for each column - one for making the ascending order to the table and other for making the descending order to table.
  1. <HTML ng-app = "myapp">    
  2.       <TITLE> AngularJS learning(orderBy Filter)</TITLE>    
  3.       <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>    
  4.       <script>    
  5.            var myapp=angular.module("myapp",[]);    
  6.            myapp.controller("myappcont",function($scope){    
  7.            $scope.colname=" ";    
  8.            $scope.students=[    
  9.            {Name:"Kailash",Sex:"Male",Class:"1Std",Section:"A"},    
  10.            {Name:"Kalyan",Sex:"Male",Class:"1Std",Section:"A"},    
  11.            {Name:"Kalyani",Sex:"Female",Class:"1Std",Section:"A"},    
  12.            {Name:"Kamal",Sex:"Male",Class:"2Std",Section:"B"},    
  13.            {Name:"Keshav",Sex:"Male",Class:"2Std",Section:"B"},    
  14.            {Name:"KedarGouri",Sex:"Female",Class:"2Std",Section:"B"}];    
  15.            });    
  16.       </script>    
  17.       <BODY ng-controller="myappcont">    
  18.            <h2>Student Details</h2>    
  19.            <hr/>    
  20.            <table border="1">    
  21.            <caption>    
  22.            Sort By : <select ng-model="colname">    
  23.            <option value="Name">Name Asc</option>    
  24.            <option value="-Name">Name Desc</option>    
  25.            <option value="Sex">Sex Asc</option>    
  26.            <option value="-Sex">Sex Desc</option>    
  27.            <option value="Class">Class Asc</option>    
  28.            <option value="-Class">Class Desc</option>    
  29.            <option value="Section">Section Asc</option>    
  30.            <option value="-Section">Section Desc</option>    
  31.            </select><br/><br/>    
  32.            </caption>    
  33.                 <tr>    
  34.                      <th>Name</input></th>    
  35.                      <th>Sex</th>    
  36.                      <th>Class</th>    
  37.                      <th>Section</th>    
  38.                 </tr>    
  39.                 <tr ng-repeat="student in students | orderBy:colname">    
  40.                      <td>{{student.Name}}</td>    
  41.                      <td>{{student.Sex}}</td>    
  42.                      <td>{{student.Class}}</td>    
  43.                      <td>{{student.Section}}</td>    
  44.                 </tr>    
  45.            </table>    
  46.       </BODY>    
  47.  </HTML>    
Next Recommended Reading Filtered TextBox Extender in Ajax