角度応答を使用してサービス応答値をユーザーフレンドリーな値に置き換えます

Question

ng-repeatを使用した表にユーザーフレンドリーな値を表示する必要があります。以下は、サービスからの応答モデルです。

[{ 
    Name : "Hon", 
    Gender : "M" 
}, 
{ 
    Name : "Hon", 
    Gender : "F" 
}, 
{ 
    Name : "Hon", 
Gender : "M" 
}, 
{ 
    Name : "Jon", 
    Gender : "M" 
}, 
{ 
    Name : "on", 
    Gender : "F" 
}] 

現在テーブルが

名性

ホンM

ホンF

ホンM

ジョンM

を以下のように表示していますF

上

が、私はテーブルが

名性別のようになりたい

本町男性

本町女性

本町男性

ジョン男性

（女性）

このことを行うには、forループを使用しません。これはここに示した簡単な例です。しかし、私の場合、このようなマッピングが必要な3〜4列の場合、1ページあたり1000レコードが得られる可能性があります。

角度jを使用するディレクティブまたはフィルタを使用してこれを行うことはできますか？もしそうなら、どのように？それとももっと良い提案がありますか？

Answer 1

角度$filterもループロジックに基づいています。実際に

あなたが角度フィルタを使用する場合は、移動するための方法は、このようになります。

.filter('genderTransform', function() { 
    return function(input) { 

    return input.map((val) => { 
     if (val.Gender == 'F') { 
     val.Gender = 'Female'; 
     } else if (val.Gender == 'M') { 
     val.Gender = 'Male'; 
     } 
     return val 
    }) 
    } 
}) 

次にテンプレートで：

<div ng-repeat="item in data | genderTransform"> 
    <!-- whatever --> 
</div> 

そして、ここでは、あなたがしたい作業fiddle