AngularJS | orderBy Filter - GeeksforGeeks

30 Apr, 2019
The orderBy filter is a handy tool used in angular js.The orderBy channel encourages you to sort an exhibit.Of course, it sorts strings in sequential order requests and numbers in the numerical request.
Syntax:
{{ orderBy_expression | orderBy : expression : reverse }} 

Parameter explanation:
expression: It is utilized to decide the request. It very well may be a string, work or a cluster.invert: It is discretionary. If you want your data to be displayed in reverse order please make sure that reverse condition in parameters to set true.
Examples: Order by case when we go through names
<!DOCTYPE html>  <html>  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>  <body>  <div ng-app="myApp" ng-controller="orderCtrl">  <ul>  <li ng-repeat="x in customers | orderBy : 'name'">      {{x.name + ", " + x.city}}  </li>  </ul>  </div>  <script>  var app = angular.module('myApp', []);  app.controller('orderCtrl', function($scope) {      $scope.customers = [          {"name" : "Amber", "city" : "ajmer"},          {"name" : "lakshay ", "city" : "vizag"},          {"name" : "karan", "city" : "London"},          {"name" : "bhaskar", "city" : "peshawar"},                  ];  });  </script>  <p>The array items are arranged by "name".</p>  </body>  </html>  
Output :
Examples: Order by case when we go through gdp by “-” and “+” orderBy
<!DOCTYPE html><html><head>  <title>AnngularJS Filters : orderBy </title>   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>  <style>    .tabled{float:left; padding:10px;}  </style> </head><body ng-app="orderByDemo"> <script>  angular.module('orderByDemo', [])    .controller('orderByController', ['$scope', function($scope) {      $scope.countries =          [{name:'SPAIN', states:'78', gdp:5},           {name:'FRANCE', states:'46', gdp:4},           {name:'PORTUGAL', states:'53', gdp:3},           {name:'CHILE', states:'06', gdp:2},           {name:'RUSSIA', states:'21', gdp:1}];    }]);</script><div ng-controller="orderByController">     <table class="tabled">    <tr>      <th>Name</th>      <th>No of States</th>      <th>GDP(descending)</th>    </tr>    <!-- orderBy Descending (-) -->    <tr ng-repeat="country in countries | orderBy:'-gdp'">       <td>{{country.name}}</td>      <td>{{country.states}}</td>      <td>{{country.gdp}}</td>    </tr>  </table>       <table class="tabled">    <tr>      <th>Name</th>      <th>No of States</th>      <th>GDP(ascending)</th>    </tr>    <!-- orderBy Ascending (+) -->    <tr ng-repeat="country in countries | orderBy:'gdp'">        <td>{{country.name}}</td>      <td>{{country.states}}</td>      <td>{{country.gdp}}</td>    </tr>  </table></div></body></html>  <strong> Examples: Order by case (seven wonders)
Output :
<!DOCTYPE html><html><script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script><body>  <div ng-app="myApplication" ng-controller="orderCtrl">  <ul><li ng-repeat="x in sevenwonder | orderBy : '-country'">{{x.name + ", " + x.country}}</li></ul>  </div>  <script>var application = angular.module('myApplication', []);application.controller('orderCtrl', function($scope) {    $scope.sevenwonder = [        {"name" : "Great Wall of China" ,"country" : "China"},        {"name" : "Christ the Redeemer Statue", "country" : "Brazil"},        {"name" : "Machu Picchu", "country" : "peru"},        {"name" : "Chichen Itza ", "country" : "Mexico"},        {"name" : "The Roman Colosseum", "country" : "Rome"},        {"name" : "Taj Mahal", "country" : "India"},        {"name" : "Petra", "country" : "Jordan"}    ];});</script><p>The array items are sorted by "country".</p>  </body></html>
Output :
Picked
AngularJS
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Angular File Upload
Angular PrimeNG Calendar Component
Angular | keyup event
Angular PrimeNG Messages Component
Auth Guards in Angular 9/10/11
How to Display Spinner on the Screen till the data from the API loads using Angular 8 ?
How to set focus on input field automatically on page load in AngularJS ?
Angular PrimeNG Dropdown Component
What is AOT and JIT Compiler in Angular ?
Angular 10 (blur) Event