How to ng-translate inside select box option in angularjs

Rahul Prasad

How do I apply ng-translate to translate options inside a select box.
For example:

Template:

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

Controller:

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

enUS.json:

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

I tried adding filter like ng-options="gender.name for gender in genders | translate" but obviously it was adding filter to $scope.genders array instead of single element

I tried writing own filter (I am new to this)

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;
  }
}])

But I got following error

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

It seems like a simple task but it has already taken half of my day, what am I doing wrong :(

Sebastian

You need to apply the filter to gender.name and not to the genders array:

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

Here is a demo

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

How to add a tooltip to a <option> in a <select> box in HTML?

分類Dev

AngularJS REST Api Select box ng-change

分類Dev

AngularJS - hide <select> element if ng-option is empty

分類Dev

How to change text inside 'value' attribute of option(select)?

分類Dev

AngularJS、<select>。<option>の `ng-click`が機能しない

分類Dev

Remove Blank option from Select Option with AngularJS

分類Dev

angularjs ng-repeat inside ng-if

分類Dev

How to enable a ng-select to be required so that a user have to select a option

分類Dev

How to print! an Option<Box<struct>>?

分類Dev

How to print! an Option<Box<struct>>?

分類Dev

Change select box value depending other selected option box

分類Dev

AngularJS-ng-optionが空の場合、<select>要素を非表示にします

分類Dev

Dropdown select option pagination in ng-table

分類Dev

unable to select option from select box after cloned

分類Dev

How to show/hide div element after dynamically loading options in select box inside these div's?

分類Dev

how do I enable a button if the option value inside a select tag is changed

分類Dev

AngularJS ng-class inside ng-repeat expression

分類Dev

AngularJs-SELECTのng-model

分類Dev

AngularJS: ng-click and select text

分類Dev

AngularJS directive with select and ng-options in template

分類Dev

Bind selected option value to model inside ng-repeat

分類Dev

how to convert to an editable select box?

分類Dev

How to set the selected option of <select>

分類Dev

how to validate select option cakephp

分類Dev

Angular ng-options gives empty select option on splice

分類Dev

ng2-select2 with dynamic ajax url option

分類Dev

How to use ngx-translate to translate component or service strings inside the typescript file

分類Dev

select option text color displayed on dropdown list but not colored in box, this option works in ie 9 but not works in chrome

分類Dev

Angular translate inside service

Related 関連記事

  1. 1

    How to add a tooltip to a <option> in a <select> box in HTML?

  2. 2

    AngularJS REST Api Select box ng-change

  3. 3

    AngularJS - hide <select> element if ng-option is empty

  4. 4

    How to change text inside 'value' attribute of option(select)?

  5. 5

    AngularJS、<select>。<option>の `ng-click`が機能しない

  6. 6

    Remove Blank option from Select Option with AngularJS

  7. 7

    angularjs ng-repeat inside ng-if

  8. 8

    How to enable a ng-select to be required so that a user have to select a option

  9. 9

    How to print! an Option<Box<struct>>?

  10. 10

    How to print! an Option<Box<struct>>?

  11. 11

    Change select box value depending other selected option box

  12. 12

    AngularJS-ng-optionが空の場合、<select>要素を非表示にします

  13. 13

    Dropdown select option pagination in ng-table

  14. 14

    unable to select option from select box after cloned

  15. 15

    How to show/hide div element after dynamically loading options in select box inside these div's?

  16. 16

    how do I enable a button if the option value inside a select tag is changed

  17. 17

    AngularJS ng-class inside ng-repeat expression

  18. 18

    AngularJs-SELECTのng-model

  19. 19

    AngularJS: ng-click and select text

  20. 20

    AngularJS directive with select and ng-options in template

  21. 21

    Bind selected option value to model inside ng-repeat

  22. 22

    how to convert to an editable select box?

  23. 23

    How to set the selected option of <select>

  24. 24

    how to validate select option cakephp

  25. 25

    Angular ng-options gives empty select option on splice

  26. 26

    ng2-select2 with dynamic ajax url option

  27. 27

    How to use ngx-translate to translate component or service strings inside the typescript file

  28. 28

    select option text color displayed on dropdown list but not colored in box, this option works in ie 9 but not works in chrome

  29. 29

    Angular translate inside service

ホットタグ

アーカイブ