Search code examples
angularjssortingangular-directive

Sorting ng-repeat with alternate ordering

I am trying to sort a client list using ng-repeat in Angular so that the column with ratings "Hot", "Warm", and "Cold" presented in that order. Currently when it sorts the Rating column it puts them in alphabetical order of "Cold", "Hot", and "Warm". How would I sort it non-alphabetically like that? Is it something with using a custom directive to create a custom attribute related to the rating value and then using "track by"?

Here is a CodePen with a working example of how it sorts alphabetically:

http://codepen.io/MattSchultz/pen/VeBpaQ 

<li id="listCont" ng-repeat="client in clients | orderBy:col:reverse as results" ng-class-even="'even'">
    <ul class="clients">
      <li>{{client.Name}}</li>
      <li>{{client.AnnualRevenue | currency}}</li>
      <li ng-class="classy('{{client.Rating}}')">{{client.Rating}}</li>
    </ul>
</li>
Solution

  • If you pass a string (i.e. an object property name) as the first argument to the orderBy filter, as you are doing in your example, it will attempt to sort alphabetically. To change this behavior, you need to pass a custom sort function instead.

    For example:

    function ratingSort(val) {
  return ['Cold', 'Warm', 'Hot'].indexOf(val.Rating);
};

    This function returns a number between -1 (i.e. val.Rating value is not in the array) and 2 (i.e. 'Hot', which is at index 2 in the array). The number returned is used to determine the sort order.

    Here is a working example: CodePen