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 ?
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 ?
Share Improve this question asked Feb 22, 2016 at 13:58 ElloneEllone 3,89812 gold badges47 silver badges77 bronze badges 3-
you mean that
<br />
is displayed as text ? – Hacketo Commented Feb 22, 2016 at 14:00 -
1
I'll suggest you to use
ng-repeat
directive – Tushar Commented Feb 22, 2016 at 14:02 - Possible duplicate of AngularJS : Insert HTML into view – Hacketo Commented Feb 22, 2016 at 14:02
3 Answers
Reset to default 4Because 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>
{{}}
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>