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>

我认为这里应该是一个角度滤镜或其他东西，但找不到任何东西。

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

最后我这样做了：

使用参数编写了不同的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);
  }
});

然后在模板中

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

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

Angular.js表达式：输出变换对象属性

2 个答案: