<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-orderBy-custom-comparator-production</title>
<link href="style.css" rel="stylesheet" type="text/css">
<script src="//code.angularjs.org/snapshot/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="orderByExample4">
<div ng-controller="ExampleController">
<div class="friends-container custom-comparator">
<h3>Custom Sorting</h3>
<table class="friends">
<tr>
<th>Key</th>
<th>Value</th>
</tr>
<tr ng-repeat="status in tenantTaskStatusList | orderBy:'Key':false:customSort">
<td>{{status.Key}}</td>
<td>{{status.Value}}</td>
</tr>
</table>
</div>
<div class="friends-container default-comparator">
<h3>Default Sort</h3>
<table class="friends">
<tr>
<th>Key</th>
<th>Value</th>
</tr>
<tr ng-repeat="status in tenantTaskStatusList | orderBy:'Key'">
<td>{{status.Key}}</td>
<td>{{status.Value}}</td>
</tr>
</table>
</div>
</div>
</body>
</html>
<!--
Copyright 2017 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
-->
(function(angular) {
'use strict';
angular.module('orderByExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.tenantTaskStatusList = [
{ "Key": 0, "Value": "New"},
{ "Key": 1, "Value": "In Process"},
{ "Key": 2, "Value": "Rejected"},
{ "Key": 3, "Value": "Incomplete"},
{ "Key": 4, "Value": "Cancelled" },
{ "Key": 5, "Value": "Complete"}];
$scope.customSort = function(v1, v2) {
var hashList = {
1: 0,
0: 1,
5: 2,
4: 3,
2: 4,
3: 5
};
console.log(v1, v2);
if (hashList[v1.value] === hashList[v2.value]) return 0;
if (hashList[v1.value] > hashList[v2.value]) return 1;
return -1;
};
}]);
})(window.angular);
.friends-container {
display: inline-block;
margin: 0 30px;
}
.friends {
border-collapse: collapse;
}
.friends th {
border-bottom: 1px solid;
}
.friends td, .friends th {
border-left: 1px solid;
padding: 5px 10px;
}
.friends td:first-child, .friends th:first-child {
border-left: none;
}
/*
Copyright 2017 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/
Create a custom sort that can be used by Angular's orderBy filter.
This gives you the ability to change the order of a custom list like
an enumeration without having to change the physical order of your
enumeration.