Cómo ng-traducir dentro de la opción de cuadro de selección en angularjs


¿Cómo puedo aplicar ng-translate para traducir opciones dentro de un cuadro de selección.
Por ejemplo:

Plantilla:

<select class="form-control" ng-model="me.gender" ng-options="gender.name for gender in genders">
</select>

Controlador:

$scope.genders = [{code: "M", name:"TXT_MALE"}, {code: "F", name:"TXT_FEMALE"}]

EnUS.json:

{
    "TXT_MALE": "Male",
    "TXT_FEMALE": "Female",
}

Intenté agregar un filtro como ng-options="gender.name for gender in genders | translate" pero obviamente estaba agregando filtro a $scope.genders matriz en lugar de elemento único

Intenté escribir un filtro propio (soy nuevo en esto)

filter('translateArrayObj', ['$translate', '_', function($translate, _) {
  return function(arr) {
    var arr2 = [];
    angular.forEach(arr, function (value, key) {
      $translate(value.name).then(function(translation) {
        var obj2 = angular.copy(value);
        obj2.name = translation;
        obj2.code = value.code;
        arr2.push(obj2);
      });
    });
    return arr2;
  }
}])

Pero tengo el siguiente error

Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!

Parece una tarea sencilla pero ya me ha llevado la mitad del día, ¿qué estoy haciendo mal :(

Author: Rahul Prasad, 2014-05-09

2 answers

Necesita aplicar el filtro a gender.name y no a la matriz genders:

<select ng-model="me.gender" ng-options="gender.name | translate for gender in genders"></select>

Aquí hay una demo

 90
Author: Sebastian,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-05-09 16:04:43

Otro método más simple mediante el uso de md-select, aquí marcador de posición también se utiliza

JSON: "placeholder":{ "gender": "Gender" }, "gender": { "TXT_MALE": "Male", "TXT_FEMALE": "Female" }

Código HTML:

<md-select ng-model="gender" placeholder="{{'placeholder.gender' | translate}}" ng-required="true" style="width: 160px;" >
    <md-option ng-value="gender .code" ng-repeat="gender in genders" translate="gender.{{gender.name}}"></md-option>
</md-select>
 0
Author: Antony Joslin,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-04-24 09:36:32