Question

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

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

如何更改此设置以人类格式显示，例如。（如下）

入境邮件将包含电话，汽车

Answer 1

如果您只想列出数组，可以使用join：

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

输出：“电话，汽车”。

Answer 2

使数组显示为一系列文本

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

Answer 3

在控制器上创建一个方法来处理array-＆gt; string：

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数组显示给人类＆＃39;可读字符串

5 个答案: