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 ?
Because Angular escapes the HTML in your string before it inserts it into the DOM, in order to prevent XSS attacks.
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.
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>
$sce does sanitize ng-bind-html. You haven't accounted for that. Answer is misleading
Safe Fix is still misleading
<span ng-repeat="category in $root.categoriesList"> {{category.name}}<br /> </span>{{}} is only interpreted as text , not html
Use ng-repeat , there is no need to parse array to html
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>
<br />is displayed as text ?ng-repeatdirective