Sort ng-options by translated values

Answer 1

I had the same problem and I recommend using an own filter, because you don't want to mess up your controller! This is my current solution:

/**
 * orderByTranslated Filter
 * Sort ng-options or ng-repeat by translated values
 * @example
 *   ng-options="country as ('countries.'+country | translate) for country in countries | orderByTranslated:'countries.'"
 * @param  {Array} array
 * @param  {String} i18nKeyPrefix
 * @param  {String} objKey
 * @return {Array}
 */
app.filter('orderByTranslated', ['$translate', '$filter', function($translate, $filter) {
  return function(array, i18nKeyPrefix, objKey) {
    var result = [];
    var translated = [];
    angular.forEach(array, function(value) {
      var i18nKeySuffix = objKey ? value[objKey] : value;
      translated.push({
        key: value,
        label: $translate.instant(i18nKeyPrefix + i18nKeySuffix)
      });
    });
    angular.forEach($filter('orderBy')(translated, 'label'), function(sortedObject) {
      result.push(sortedObject.key);
    });
    return result;
  };
}]);

Notice you need to pass your i18n prefix 'LANGUAGE.' and I saw your using an object instead of a simple string array so you can use it like this:

<select name="languageId"
  ng-options="p.id as ('LANGUAGE.'+p.id)|translate for p in Const.languages | orderByTranslated:'LANGUAGE.':'id'">