web-dev-qa-db-ja.com

angularjsの選択ボックスオプション内で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!

それは単純なタスクのように思えますが、私の一日の半分はすでにかかっています、私が間違っていることは何ですか：（

angularjsng-optionsangular-translate
46
Rahul Prasad

genders配列ではなく、gender.nameにフィルターを適用する必要があります。

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

デモはこちら

94
Sebastian

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>
0
Antony Joslin