使用 Array.join('<br />')

Question

为什么这不起作用？ :

this.categoriesId = $rootScope.categoriesList.map(function(obj) {
  return obj.id;
}).join('<br />');
this.categoriesName = $rootScope.categoriesList.map(function(obj) {
  return obj.name;
}).join('<br />');

并在视图中：

<b>Categories ID :</b><br/><br/>
{{h.categoriesId}}
<hr>
<b>Categories Name :</b><br/><br/>
{{h.categoriesName}}

没有换行符，<br /> 没有解释。

我该如何解决这个问题？

Answer 1

试试这个方法：

<b>Categories Name :</b><br/><br/>
<span ng-bind-html="h.categoriesName"><span>

或创建地图并加入过滤器：

app
.filter('map', function () {
    return function (arr, prop) {
        return arr.map(function (item) {
            return item[prop];
        });
    };
})
.filter('join', function () {
    return function (arr, sep) {
        return arr.join(sep);
    };
});

HTML:

<span ng-bind-html="categoriesList | map: 'name' | join '<br/>'"><span>

Answer 2

{{}} 仅被解释为文本，而不是 html

使用 ng-repeat ，不需要将数组解析为 html

Answer 3

因为 Angular 在将字符串中的 HTML 插入 DOM 之前对其进行转义，以防止 XSS 攻击。

乱七八糟的修复

使用 ng-bind-html 指令按原样插入 HTML 。

<span ng-bind-html="h.categoriesName"></span>

确保包含 $sanitize 服务，ng-bind-html 将自动清理您的字符串以确保它在其上下文中是安全的。

清理修复

使用 ng-repeat 遍历列表，无需担心将标记插入字符串。

<b>Categories Name :</b><br/><br/>
<span ng-repeat="name in categoriesList">
  {{name}}<br />
</span>

使用 Array.join('<br />')

Using Array.join('<br />')

html

javascript

arrays

string-formatting

angularjs

乱七八糟的修复

清理修复