AngularJS: ng-repeat filter property before orderBy

Question

Can I add extra filters to an orderBy clause in ng-repeat to process a given value before orderBy does its job?

I have an md-select like this

  <md-option ng-repeat="element in list | orderBy: 'name': reverse" 
             ng-value="element">
    <span>{{element.name | translate}}</span>
  </md-option>

This sorts by the underlying 'name' (like ENUM_ACCEPT, ENUM_CANCEL...) but not by the rendered name after translation (Accept, Cancel...) which may change depending on language, thus, order should change too.

Answer 1

Try this one

  <md-option ng-repeat="element in list | translate for element in list | orderBy: 'name': reverse" 
         ng-value="element">
  <span>{{element.name | translate}}</span>
 </md-option>

The reason for what you are facing is the options are sorted by their original name not their translated one. Adding translate for element in listfilter should resolve your issue.

Answer 2

This is working for me:

<md-option ng-repeat="element in list | translate for element in list | orderBy: 'name | translate': reverse" 
         ng-value="element">
  <span>{{element.name | translate}}</span>
 </md-option>