var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.options = [{
label: "id",
value: "id"
}, {
label: "-id",
value: "-id"
}, {
label: "country",
value: "country"
}, {
label: "address",
value: "address"
}, {
label: "country, -id",
value: ["country", "-id"]
}, {
label: "-country, address",
value: ["-country", "address"]
}];
// all countries
$scope.details = [{
id: 1,
country: 'Finland',
address: 'Mainstreet 2'
}, {
id: 2,
country: 'Mexico',
address: 'Some address 1'
}, {
id: 3,
country: 'Canada',
address: 'Snowroad 45'
}, {
id: 4,
country: 'Finland',
address: 'Rainbow 12'
}, {
id: 5,
country: 'Canada',
address: 'Beverly 15'
}, {
id: 6,
country: 'Mexico',
address: 'Some address 3'
}];
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.js"></script>
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link href="style.css" rel="stylesheet" />
<script data-semver="1.4.9" src="https://code.angularjs.org/1.4.9/angular.js" data-require="[email protected]"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<div>
<label>Country filter</label>
<input type="text" ng-model="countryFilter" />
<label>Order by</label>
<select ng-model="selectedOrder" ng-options="option.label for option in options">
</select>
</div>
<ul>
<li ng-repeat="detail in details | filter:{country: countryFilter} | orderBy:selectedOrder.value">{{ detail }}</li>
</ul>
</body>
</html>