AngularJs #04 How To Use The orderBy Flter To Sorting Data With Two Methods ( Tutorial )

Image Source

What Will I Learn?

I will learn how to sorting data in angularJS with the filter ' orderBy ' .

• How to use the filter orderBy to sorting data .
• What's the parameters of sorting first method .
• What's the parameters of sorting second method .

Requirements

• Basic Knowledge of HTML and CSS language .
• Basic Knowledge of JavaScript language .
• Has an editor text support HTML and JavaScript .
• Must has the angular files from the official site .

Difficulty

• Basic

Tutorial Contents

In this tutorial we will discuss the sorting data in AngularJS we use the orderBy filter , how ?
{{ orderBy_expression | orderBy : expression : reverse }} this is the binding expression of this filter so you choose the orderBy expression that you would to order , then the pipe sign ' | ' to create the filter , after the the name of filter as our case here orderBy , the expression that you want to do and it's ascending or descending order ..
Example : ng-repear = " employee in employees | orderBy : 'salary ' : false
So I have used the order by expression which is the ' employee in employees ' inside the ng-repeat directive , also the filter ' orderBy ' the parameter is the column salary and the reverse value is false , so we have two value of reverse parameter is boolean it will be true or false no other ..

• To sort data in ascending order , set reverse to false .
• To sort data in descending order , set reverse to true .
  There is other way to sort data you can use the ' + 'sign to sort data in ascending order or ' - ' sign to sort them in descending order ..
  Example : ng-repeat = " employee in employees | orderBy : '+salary' "
  As you see I have added the plus sign to the column to be in ascending order .
  Now I will to give you an example how to use the orderBy , firstly I want to create an object of employees has name , date of birth , gender and salary from the angularJS
  
  And now I will import these informations by the binding expression in HTML after the relation of module and controller by the ng-repeat directive in a table ..
  
  This is the result of the table , this is by default order as I created in AngularJS file
  
  I want to sort data in ascending order , I will use the filter of orderBy with the column that I want and the reverse value ..
  
  I have sort this data by name in ascending order , the reverse has the value false , by default if we take it empty it will have the value false , this is the result :
  
  As you see the order has changed Ben stay the first but there is a change of places between Sara and Mark , I will now modify the reverse value to true .
  
  Good , the value of reverse has changed to true before we see the result I think it will be in descending order
  
  Great ! So the value of reverse if it's true we're in descending order , else in ascending order , by default is ascending .
  
  This is the second method to sort by the sign ' + ' as I used here it will be in ascending order
  
  Very nice the data sorted with ascending order , I will now use the ' - ' minus sign to sort data with descending order ..
  
  As you see I used the minus sign and this is the result in descending order
  
  Now I want to be dynamically I want to choose the column then , I choose the type of order and from my choice the data will sort
  
  Here I have created a select option inside it I have added the ng-model to be dynamic with the angular and to use it in the HTML page , then the value if the column is ascending order I put just the name else if it's descending order I put the minus sign ' - ' .
  
  I must link it with the $scope to be angular propriety and I gave it the " name " column by default .
  
  In the first parameter I put the value of model which is from the angular it's dynamically the value of options that the user selected , this is the result :
  
  This is the result sorting by name it's by default as I did in the angularJS page
  
  This is the descending order of name column as I have created in options
  
  Here I have selected the salary with ascending order
  
  And this is the salary in descending order with the minus sign .

Curriculum

• AngularJs #01 Installation of Module , Create and Use Controller , Use Directive ' ng-model ' ( Tutorial )
• AngularJs #02 How To Use The Directive ' ng-src and ng-repeat ' ( Tutorial )
• AngularJs #03 How To Use The Filters ( Tutorial )

---

Posted on Utopian.io - Rewarding Open Source Contributors

---