JSFiddle - React, Tailwind, and code Playground
HTML
<div ng-app>
<div ng-controller="Ctrl">
<select data-ng-change="orderByChange()" class="order-by" data-ng-model="orderBy" id="orderBy" data-ng-show="results.length > 0">
<option selected="selected" value="recent">Recently Added</option>
<option value="price-low-high">Price (low to high)</option>
<option value="price-high-low">Price (high to low)</option>
<option value="name-az">Name A-Z</option>
<option value="name-za">Name Z-A</option>
</select>
<ul>
<li data-ng-repeat="result in results | orderBy: [orderByOptions, recent] track by $index">
<p>ID: {{result.id}}</p>
<p>Product: {{result.name}}</p>
<p>Price: {{result.price}}</p>
<p>Added: {{result.added | date:'dd/MM/yyyy' }}</p>
<br />
</li>
</ul>
</div>
</div>
JavaScript
function Ctrl($scope) {
$scope.results = [
{
"id": 1,
"name": "Pants",
"price" : 10,
"added" : parseInt(("/Date(1387447036483)/").substr(6))
},
{
"id": 2,
"name": "Skirt",
"price" : 110,
"added" : parseInt(("/Date(1387446157807)/").substr(6))
},
{
"id": 3,
"name": "Shoes",
"price" : 310,
"added" : parseInt(("/Date(1407502034963)/").substr(6))
},
{
"id": 4,
"name": "Hat",
"price" : 36,
"added" : parseInt(("/Date(1410973293660)/").substr(6))
},
{
"id": 5,
"name": "Vase",
"price" : 2,
"added" : parseInt(("/Date(1391102899140)/").substr(6))
}
];
$scope.orderBy = 'recent';
$scope.orderByOptions = function (result) {
if ($scope.orderBy == 'recent'){
return -result.added
}
else if ($scope.orderBy == 'price-low-high') {
return result.price;
}
else if ($scope.orderBy == 'price-high-low') {
return -result.price;
}
else if ($scope.orderBy == 'name-az') {
return result.name;
}
else if ($scope.orderBy == 'name-za') {
return -result.name;
}
else return result.added;
};
}