HTML break line using <br> tag in <p> 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.

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

Answer 2

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 .

Answer 3

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);
             };
           }]);