programing

angularjs에서 inside select box 옵션을 ng-translate하는 방법

subpage 2023. 3. 25. 11:06
반응형

angularjs에서 inside select box 옵션을 ng-translate하는 방법

선택 상자 내의 옵션을 변환하려면 어떻게 ng-translate를 적용해야 합니까?
예를 들어 다음과 같습니다.

템플릿:

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

컨트롤러:

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

enUS.json:

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

필터를 넣으려고 했는데ng-options="gender.name for gender in genders | translate"필터가 더해진 건 분명해$scope.genders단일 요소가 아닌 배열

직접 필터를 써 보았습니다(처음입니다).

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

그런데 다음과 같은 오류가 발생했습니다.

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

간단한 작업인 것 같습니다만, 벌써 반나절이나 걸려 버렸습니다만, 무엇을 잘못하고 있는 것일까요.

필터를 적용해야 합니다.gender.name에 대해서가 아니라genders어레이:

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

여기 데모가 있습니다.

md-select를 사용하는 또 다른 간단한 방법은 여기에 자리 표시자도 사용합니다.

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

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>

언급URL : https://stackoverflow.com/questions/23568180/how-to-ng-translate-inside-select-box-option-in-angularjs

반응형