1

制御のために、ネストされた JSON データをグループ化して変換する必要があります。<select>これは、理想的には、クライアント側のデータ形式に触れたり、ヘルパー構造を作成したりせずに、http サービスから受け取っています。そのため、コントローラーにはこのためのほぼゼロのロジックが含まれ、グループ化と翻訳全体が HTML マークアップ側になります。

私が受け取っているデータは multiple の配列でwork groupsあり、それぞれが関連する a への参照を保持し、グループが持つservice typeすべてのものです。work itemsしたがって、（簡略化された）構造は次の配列です。

データ

[{
    "id": 1,
    "serviceTypeId": 1
    "works": [{
        "id": 101
    },{
        "id": 102
    }]        
}, ...

各サービス タイプ、ワーク グループ、およびワークについてid、現在のロケールに従って、クライアントで値を翻訳する必要があるだけです。翻訳は、すべてのキーと値のペアが として構造化されている JSON ファイルにあります<KEY>.<id>:<translation>。例えば：

翻訳

"WORKGROUP.1" : "Some group",
"WORKGROUP.2" : "Other group",
...
"WORK.101" : "Work number 101
...

したがって、正しい表示値を取得するにはid、既知のものと組み合わせる必要があります。key

私が必要としているのは、可能なすべてがグループ化された<select>コントロールです。グループを選択すると、関連するすべての. これは私が現在持っているものです。work groupsservice typeworks

HTML

<select ng-model="selectedGroup" 
        ng-options="'WORKGROUP.' + g.id | translate group by 'SERVICETYPE.' + g.serviceTypeId | translate for g in groups" 
        ng-change="groupChanged()"></select>
...

<span ng-hide="!selectedGroup">
  <label>
    {{ 'WORKS' | translate }} -
    {{ 'SERVICETYPE.' + selectedGroup.serviceTypeId | translate }} - 
    {{ 'WORKGROUP.' + selectedGroup.id | translate }}
    </label>
  <div ng-repeat="work in groupWorks">
      {{ 'WORK.' + work.id | translate }} <br />
  </div>
</span>

上記は問題なく動作しますが、生データから作成した「グループ」var を使用します (下の plunkr へのリンクを参照)。コントローラー側にロジックを追加せずに、この種のアイテムのグループ化と翻訳を取得する方法はありますか?

これは、望ましい結果に関連するプランカーです: http://plnkr.co/edit/99gVZe

編集: @plalx による驚くべき洞察に基づいて、ここに what-I-wanted-to-achieve へのリンクがありますhttp://plnkr.co/edit/3bMZZs

4

0 に答える 0