Using Array.join('
')

Question

Is there any reason this is not working ? :

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

and in the view :

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

There is no line breaks, the <br /> isn't interpreted.

How can I work around this ?

Possible duplicate of [AngularJS : Insert HTML into view](http://stackoverflow.com/questions/9381926/angularjs-insert-html-into-view) — Hacketo, Feb 22 '16 at 14:02

Dan Prince · Accepted Answer · 2016-02-22T14:19:20.323

4

Because Angular escapes the HTML in your string before it inserts it into the DOM, in order to prevent XSS attacks.

Messy Fix

Use the ng-bind-html directive to insert the HTML as is.

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

Make sure to include the $sanitize service, and ng-bind-html will automatically sanitize your string to make sure it's safe within its context.

Clean Fix

Use ng-repeat to iterate over the list without needing to worry about inserting markup into your string.

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

edited Feb 22 '16 at 14:19

answered Feb 22 '16 at 14:05

Dan Prince

28,326
12
86
115

`$sce` does sanitize `ng-bind-html`. You haven't accounted for that. Answer is misleading – charlietfl Feb 22 '16 at 14:11
@charlietfl Updated. – Dan Prince Feb 22 '16 at 14:15
also can't use it without sanitize included as it will throw error and output nothing. So realistically `Safe Fix` is still misleading – charlietfl Feb 22 '16 at 14:16
Yep, got it: "Make sure to include the $sanitize service" – Dan Prince Feb 22 '16 at 14:18
Got it working with a slight modification : ` {{category.name}}
` – Ellone Feb 22 '16 at 14:47
@Ellone should really get away from using `$rootScope` to store your data. – charlietfl Feb 22 '16 at 18:19

score 1 · Answer 2 · answered Feb 22 '16 at 14:02

1

{{}} is only interpreted as text , not html

Use ng-repeat , there is no need to parse array to html

answered Feb 22 '16 at 14:02

charlietfl

169,044
13
113
146

score 0 · Answer 3 · answered Feb 22 '16 at 14:02

Try this way:

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

Or create map and join filter:

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>

Using Array.join('')

3 Answers3

Messy Fix

Clean Fix

Using Array.join('
')