AngularJS:把数组打印成字符串的好方法

AngularJS: Neat way to print array as string

本文关键字：字符串 方法 打印 数组 AngularJS      更新时间：2023-09-26

我有一个下面的数组:

"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>

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

谢谢你的关注。

这是一个从每个数组元素中提取特定道具的过滤器，然后使用分隔符将它们连接起来(示例):

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>

如果是平面数组，则去掉第三个参数:

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

您可以使用'ng-repeat' - 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>
相关文章：