I have this HTML section below. I am using ng-repeat to populate a table with data and I'm looking for a way to sort and reverse-sort the data by clicking on the table columns. I attempted a solution but all columns are accessing the same property.
<div>
<table class="friends">
<tr>
<th ng-repeat="key in keys" ng-click="sortBy(propertyName)">{{key}}</th>
</tr>
<tr ng-repeat="friend in friends | orderBy:propertyName:reverse">
<td ng-repeat="key in keys">{{friend[key]}}</td>
</tr>
</table>
This is how my Controller looks like:
var friends = [
{name: 'John', phone: '555-1212', age: 10},
{name: 'Mary', phone: '555-9876', age: 19},
{name: 'Mike', phone: '555-4321', age: 21},
{name: 'Adam', phone: '555-5678', age: 35},
{name: 'Julie', phone: '555-8765', age: 29}
];
$scope.keys = {
first: "name",
second: "phone",
third: "age"
};
$scope.propertyName = 'age';
$scope.reverse = true;
$scope.friends = friends;
$scope.sortBy = function(propertyName) {
$scope.reverse = ($scope.propertyName === propertyName) ? !$scope.reverse : false;
$scope.propertyName = propertyName;
};