Angular.js表达式：输出转换后的对象属性

Question

我有这样的数据：

var user = {
  name: 'John Doe',
  property: 'value',
  ranks: [
    {name: 'One', property: 'value'},
    {name: 'Two', property: 'value'}
  ]
}

我想在页面的某处输出所有用户的等级名称，用逗号分隔，如下所示：

<td>John Doe</td>
<td>One, Two</td>

这个怎么做？

纯JavaScript无法正常工作：

<td>{{user.name}}</td>
<td>{{user.ranks.map(function(r) { return r.name }).join(', ')}}</td>

我认为这里应该是Angular过滤器之类的东西，但找不到任何东西。

Answer 1

您不能在模板中编写类似的JS。 角度方法是使用过滤器：

app.filter("usersFilter" , function () {
        return function(user) {
           return user.ranks.map(function(r) { return r.name }).join(', ');
        }
}

并在您的HTML中：

<td>{{ user | usersFilter}}</td>

Answer 2

最终我做到了：

1. 编写不同的map并使用参数join过滤器：

    app.filter("map", function() { return function(collection, attribute) { return collection.map(function(object) { var attr = object[attribute]; return (typeof attr === "function") ? attr() : attr; }); } }); app.filter("join", function() { return function(collection, separator) { return collection.join(separator); } }); 

2. 然后在模板中

    <td>{{user.ranks | map:'name' | join:', ' }}</td> 

现在它以我想要的方式工作。