使用Array.join（＆＃39; <br/>＆＃39;）

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

因为Angular在将其插入DOM之前会转义字符串中的HTML，以防止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>

Answer 2

尝试这种方式：

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

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

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