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>
<meta http-equiv="Content-Type" content="text/html;
charset=ISO-8859-1">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="script.js"></script>
<title>Sorting Example</title>
<link href="Styles.css" rel="stylesheet"/></head>
<body>
<div ng-app="myModule" ng-controller="myController">
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>
<tr ng-repeat="employee in employees | orderBy : sortColumn">
<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.
Output :
When we select FirstName then the data sorted by name column in ascending order.
When we select LastName then the data sorted by lastName column in ascending order.
When we select Gender then the data sorted by gender column in ascending order.
When we select salary then the data sorted by salary column in descending order.
