My data structure looks like this:
$scope.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 }
];
I am trying to implement a sorting feature where users can sort by name, phone, or age using a select input. Here is the code snippet:
<select class="sortBy" ng-model="sort" ng-change="order(predicate)">
<option value="name" ng-click="order('name')" ng-selected="predicate === 'name'">Name</option>
<option value="phone" na-click="order('phone')" ng-selected="predicate === 'phone'">Phone</option>
<option value="age" ng-click="order('age')" ng-selected="predicate === 'age'">Age</option>
</select>
This is my current order function implementation:
$scope.order = function(predicate) {
alert(predicate);
$scope.reverse = ($scope.predicate === predicate) ? !$scope.reverse : false;
scope.predicate = predicate;
};
However, I am facing an issue where an empty option is being created and the values when I change the select are not set correctly. Any suggestions on how to fix this?