基于键值对数组的AngularJS格式化数据

Question

我下面有带有Angular的HTML，它简单地循环遍历每个结果并打印出来：

<tr ng-repeat="transaction in transactions | filter:search">
    <td>{{transaction.created}}</td>
    <td><a href="#/transactions/{{transaction.id}}">{{transaction.type}}</a></td>
    <td>{{transaction.amount}}</td>
</tr>

但是，数据库type值是发送，接收，购买和出售。 当它在视图中显示时，我希望它像您期望的那样是一个动词（已发送，已接收，已购买，已出售）。

如何创建带有db value的键值对的JavaScript数组以显示值，并在该数组中与键匹配的位置显示该值（在Angular中）？

Answer 1

假设您得到的types类似于：

• 已发送200
• 150个收到
• 25买
• 出售354

您可以创建一个简单的过滤器，如下所示：

app.filter('typeToString', function(){
    var types = {'200':'sent', '150':'received', '25':'bought', '354':'sold'};
    return function(type){
         return types[type];
    };
})

并像这样使用它：

<tr ng-repeat="transaction in transactions | filter:search">
    <td>{{transaction.created}}</td>
    <td><a href="#/transactions/{{transaction.id}}">{{transaction.type|typeToString}}</a></td>
    <td>{{transaction.amount}}</td>
</tr>

工作实例

另一方面，如果您得到的types类似于：

• 0已发送
• 1个收到
• 2买
• 3出售

然后您的过滤器可能是这样的：

app.filter('typeToString', function(){
    var types = ['sent', 'received', 'bought', 'sold'];
    return function(type){
         return types[type];            
    };
})

工作实例