HTML break line using
tag in
tag

Question

In my HTML, I am using

to show some text, like this:

 <p> {{item.bio}} </p>

And here is the sample of bio object:

 "bio": "A<br>B<br>C<br>D<br>E<br>F"

I was expecting that I'll get each and every alphabet in separate lines, but worst thing is when I run my HTML, showing me text as it is written with <br> tag.

Your [MCVE] is missing the JavaScript (so it isn't complete or verifiable). We can't tell what is replacing that template placeholder with the data. (There are several different template languages that use similar syntax out there, and they work in different ways) — Quentin, Nov 04 '16 at 10:12
Or handlebars? :) in which case you could use `{{{item.bio}}}` — Nsevens, Nov 04 '16 at 10:13
Duplicate: http://stackoverflow.com/questions/18771822/angular-variable-generating-html — Quentin, Nov 04 '16 at 10:18
maybe this link will help you: http://stackoverflow.com/questions/9381926/angularjs-insert-html-into-view — Benjamin, Nov 04 '16 at 10:18
Another duplicate: http://stackoverflow.com/questions/15754515/how-to-render-html-with-angular-templates — Quentin, Nov 04 '16 at 10:19

styopdev · Answer 1 · 2016-11-04T10:31:58.007

1

For inserting html in ionic V1 you should use ng-bind-html directive:

 <div ng-bind-html="item.bio"></div>

and for second version

<div [innerHTML]="item.bio"></div>

edited Nov 04 '16 at 10:31

answered Nov 04 '16 at 10:20

styopdev

2,604
4
34
55

score 1 · Accepted Answer · answered Nov 04 '16 at 10:20

1

Evaluates the expression and inserts the resulting HTML into the element in a secure way. Use ngSanitize in your module's dependencies.

Your code would we like:

<p ng-bind-html="item.bio"></p>

For more details read here.

answered Nov 04 '16 at 10:20

Deepak Agrawal

1,301
5
19
43

most easiest and best solution :) I tapped as useful and will accept soon – Sophie Nov 04 '16 at 10:22

score 0 · Answer 3 · answered Nov 04 '16 at 10:19

use sanitize

 angular.module('sanitizeExample', ['ngSanitize'])
           .controller('ExampleController', ['$scope', '$sce', function($scope, $sce) {
             $scope.snippet =
               '<p style="color:blue">an html\n' +
               '<em onmouseover="this.textContent=\'PWN3D!\'">click here</em>\n' +
               'snippet</p>';
             $scope.deliberatelyTrustDangerousSnippet = function() {
               return $sce.trustAsHtml($scope.snippet);
             };
           }]);

HTML break line using tag in tag

3 Answers3

HTML break line using
tag in
tag