Sorting data in AngularJS : Sorting Data In AngularJS

To sort the data in angular we use the orderBy filter

Here is the syntax :

{{ orderBy_expression | orderBy : reverse}}

Specifying the orderBy_Expression followed by (|) pipe character and then the name of the filter orderBy this filter has got two parameters expression and reverse. Reverse parameter is optional

Example:

ng-repeat=”employee in employees | orderBy: ‘salary’:false”

For each employee in employees following that we have pipe character and the name of the filter orderBy. For first parameter expression we have pass value as a salary. So the employee data is sorted by using the salary column and for reverse parameter we passing false value. So here employee data is sorted by using salary column in ascending order.

To sort the data in ascending order, set reverse to false.

To sort in descending order set reverse to true.

You can also use + and – to sort in ascending and descending order respectively.

Example : ng-repeat=”employee in employees | orderBy: ‘+salary’”

In the above example we are using same ng-repeat directive but look at the column name we are using + prefix to salary column name that means employee table is sorted by salary column in ascending order.

Example

Script.js

var app = angular.module("myModule", []);

app.controller("myController", function($scope){

var employees = [

{name: "Linda", lastName: "Anderson", gender: "Female", salary: 45000 },

{name: "axel", lastName: "blez", gender: "Male", salary: 35000 },

{name: "Mark", lastName: "avence", gender: "Male", salary: 80000.45 },

{name: "shown", lastName: "frost", gender: "Male", salary: 59000.98 }

];

$scope.employees = employees;

$scope.sortColumn = "name";

});

Sort.html

<html>

<head>

<title>Sorting Example</title>

<body>

Order BY : <select ng-model="sortColumn">

<option value="name">FirstName Asc</option>

<option value="lastName">LastName Asc</option>

<option value="gender">Gender Asc</option>

<option value="-salary">Salary DEC</option>

</select><br><br>

<table>

<thead>

<tr>

<th>FirstName</th>

<th>LastName</th>

<th>Gender</th>

<th>Salary</th>

</tr>

</thead>

<tbody>

<td>{{ employee.name }}</td>

<td>{{ employee.lastName }}</td>

<td>{{ employee.gender }}</td>

<td>{{ employee.salary }}</td>

</tr>

</tbody>

</table>

</div>

</body>

</html>

Here we provide the opportunity to user to select the column and direction by which he want to sort the table. Here within our controller function we building the employee array which contains the 4 employee objects and each employee has got name, lastName, gender and salary property. We attached that employee to scope object. So the model is going to be employees . And within our view we are using table element to display the data so we have <th> section displaying the column headers name, lastName, gender, salary. <tbody> section displaying the actual data.

Here we are using ng-repeat directive looping through each employee objects in employees model and then displaying name, lastName, gender and salary. We are using ng-model directive to select element. The model is sortColumn. We add this property to the scope. So within our controller function we are using $scope.sortColumn = “name”; Here employee data is sorted by using the name column. So here we attach the sortColumn property to scope object and the initial value is name means initially the value is sorted by name.

In our select element we have the different options to sort the data, firstly we want to sort the data by name column so the value is name. Here we want sort by name, lastName, gender in ascending. And salary in descending order, As we want to sort salary column in descending we are using column name with ‘-‘(minus).

And in ng-repeate directive we are using our orderBy filter with the column by which we want to sort the data. So here we are using our model property sortColumn. sortColumn property is initialized to name. When this page is initially render 2 things should happen firstly the employee data is sorted by name column in ascending order. Then the ng-model of select element is also set to same scope that is sortColumn property so the name is automatically selected. When we select salary then the data sorted by salary column in descending order.