<!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="user">
<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>
// Code goes here
/* Styles go here */
.user {
border-collapse: collapse;
}
.user th {
border-bottom: 1px solid;
}
.user td, .user th {
border-left: 1px solid;
padding: 5px 10px;
}
.user td:first-child, .user th:first-child {
border-left: none;
}