Comment faire ng-traduire à l'intérieur de l'option select box dans angularjs
Comment appliquer ng-translate pour traduire des options dans une boîte de sélection.
Par exemple:
Modèle:
<select class="form-control" ng-model="me.gender" ng-options="gender.name for gender in genders">
</select>
Contrôleur:
$scope.genders = [{code: "M", name:"TXT_MALE"}, {code: "F", name:"TXT_FEMALE"}]
enUS.json:
{
"TXT_MALE": "Male",
"TXT_FEMALE": "Female",
}
j'ai essayé d'ajouter le filtre ng-options="gender.name for gender in genders | translate"
mais évidemment il ajoutait filtre à $scope.genders array au lieu de single element
j'ai essayé d'écrire propre filtre (je suis nouveau)
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;
}
}])
Mais j'ai eu suivantes erreur
Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!
cela semble comme une tâche simple mais cela a déjà pris la moitié de ma journée, qu'est-ce que je fais de mal: (
2 réponses
Vous devez appliquer le filtre gender.name et pas <à la!--2 -- > array:
<select ng-model="me.gender" ng-options="gender.name | translate for gender in genders"></select>
une autre méthode plus simple en utilisant md-select, ici placeholder est aussi utilisé
JSON:
"placeholder":{
"gender": "Gender"
},
"gender":
{
"TXT_MALE": "Male",
"TXT_FEMALE": "Female"
}
Code 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>