Use orderBy filter to do this: orderBy:['-age','name']
Syntax:
<div ng-repeat="user in users | orderBy:['-age', 'name']">
<div></div>
</div>
This will order by descending status (by
prefixing the - character), then ascending name. Currently, you're passing true
to reverse the sort, which is causing the status to be correct (online first),
but the names to be reversed (i.e., descending).
If you want to keep the reverse boolean, you could use orderBy:['-age,name]:true but that
seems less clear than just making status descending as shown earlier.
Let
see the example in details:-
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example
- Angularjs orderby multiple fields</title>
<link href="style.css" rel="stylesheet" type="text/css">
<script src="//code.angularjs.org/snapshot/angular.min.js"></script>
<script>angular.module('orderByExap',
[])
.controller('CtrlExamp',
['$scope', function($scope) {
$scope.users = [
{name: 'Anil', phone: '9015519972', age: 34},
{name: 'Sunil', phone: '9015519971', age: 30},
{name: 'Sushil', phone: '9015519975', age: 21},
{name: 'Aradhya', phone: '9015519978', age: 5},
{name: 'Reena', phone: '9015519979', age: 29}
];
}]);</script>
</head>
<body ng-app="orderByExap">
<div ng-controller="CtrlExamp">
<table class="friends">
<tr>
<th>Name</th>
<th>Age</th>
<th>Phone</th>
</tr>
<tr ng-repeat="user in users | orderBy:['-age', 'name']">
<td>{{user.name}}</td>
<td>{{user.age}}</td>
<td>{{user.phone}}</td>
</tr>
</table>
</div>
</body>
</html>
Result looks like –
|
Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..
|
![Angular orderby multiple fields | orderBy:['-age', 'name']](https://1.bp.blogspot.com/-S2HsUxu3eX4/XQODmFuqKgI/AAAAAAAAU3E/ccQ-E7-2LwIpxBqP1kGOl9rtMFO-hS2uACLcBGAs/s72-c/angular%2Borderby%2Bmultiple%2Bfields.png)