Question

我有以下数组：

"cast": [
      {
        "name": "James Stewart"
      },
      {
        "name": "Kim Novak"
      },
      {
        "name": "Barbara Bel Geddes"
      },
      {
        "name": "Tom Helmore"
      }
    ]

将AngularJS格式化为：

James Stewart, Kim Novak, Barbara Bel Geddes, Tom Helmore

有没有办法使用filter或formatter，以便我可以在模板中巧妙地做到：

<font class="authors-string">{{ object.cast | filter/formatter/? }}</font>

我认为在控制器中编写这种简单解析的逻辑会使控制器主体变得混乱。

感谢您的关注。

Answer 1

这是一个过滤器，从每个数组元素中提取某个prop，然后使用分隔符（demo）连接它们：

app.filter('join', function () {
    return function join(array, separator, prop) {
        if (!Array.isArray(array)) {
            return array; // if not array return original - can also throw error
        }

        return (!angular.isUndefined(prop) ? array.map(function (item) {
            return item[prop];
        }) : array).join(separator);
    };
});

用法：

<p class="authors-string">{{ cast | join:', ':'name' }}</p>

如果是平面数组，则删除第3个参数：

<p class="authors-string">{{ animals | join:', ' }}</p>

Answer 2

您可以使用＆＃39; ng-repeat＆＃39; - https://docs.angularjs.org/api/ng/directive/ngRepeat

一个例子是：

<div ng-repeat="(key, value) in myObj"> ... </div>

在除最后一个值之外的所有值上添加逗号：

<div ng-repeat="(key, value) in myObj"> ... <span ng-if="!$last">, </span></div>

AngularJS：将数组打印为字符串的简洁方法

2 个答案: