将 AngularJS 数组显示为 'human' 可读字符串

Question

我输出了一个变量，它是我视图中的一个数组，它显示的值如下:-

Inbound bound posts will contain ["phone", "car"]

如何更改它以以人类格式显示它，例如。 (如下)

入站帖子将包含phone、汽车

Answer 1

如果你只是想列出你可以使用的数组 join:

arr = ["phone", "car"];
arr.join(", ");

会输出："phone, car".

Answer 2

使数组显示为一系列文本

Inbound bound posts will contain {{ ["phone", "car"].join(', ') }}

Answer 3

在您的控制器上创建一个方法来处理数组->字符串：

let arrayToWrite = ['phone', 'car'];
aToS() {
  return arrayToWrite.join(' ');
}

那么你的看法：

Inbound bound posts will contain {{ vm.aToS() }}

（假设 'vm' 是您的控制器，按照标准约定）

如果需要，您也可以将数组输入到方法中，而不是在方法外部定义数组。

Answer 4

有很多选择。你也可以这样做：

    <div>
      Inbound bound posts will contain
      <span ng-repeat="obj in objects">{{obj}} </span>
    </div>

并在您的控制器中保存作用域列表：

$scope.objects = ["car", "phone"];

Answer 5

您可以使用过滤器：

myApp.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 (!!prop ? array.map(function (item) {
            return item[prop];
        }) : array).join(separator);
    };
});

在你的 HTML 中，简单地写下：

<div ng-controller="MyCtrl">
  Inbound bound posts will contain {{things | join: ', ' }}
</div>

一个有效的 JSFiddle：http://jsfiddle.net/Lvc0u55v/12345/

将 AngularJS 数组显示为 'human' 可读字符串

Display AngularJS array to a 'human' readable string

javascript

arrays

string-formatting

angularjs