Recently, I encountered an issue with a HTML select element that is used to sort a list. The code for the select element looks like this:
<select ng-init="sortMethod=sortMethods[0]" ng-model="sortMethod">
<option ng-repeat="sortMethod in sortMethods">{{sortMethod}}</option>
</select>
The available sort methods are defined as follows:
$scope.sortMethods = ['created', 'likes.count'];
I am utilizing the sortMethod variable to order a collection of objects:
<li ng-repeat="story in feedData|orderBy:sortMethod">
Panel Count: {{story.frameURIs.length}}
</li>
Everything seems to be working correctly, however, the problem lies in the aesthetics of the select box options. Currently, it displays "created" and 'likes.count", but I would prefer it to show something more user-friendly like "Most Recent" and "Most Popular".
I attempted to modify sortMethod by using an array of objects:
$scope.sortMethods = [{'displayVal': 'Most Recent', 'sortVal': 'created'}, {'displayVal': 'Most Popular', 'sortVal': 'likes.count'}];
I then tried displaying sortMethod.displayVal in the select element, and sorting by
<li ng-repeat="story in feedData|orderBy:sortMethod.sortVal"