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 –
