CODEWITHSUNDEEP
javascripthtml
Sophie
Sophie

Reputation: 2634

HTML break line using <br> tag in <p> tag

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.

Upvotes: 0

Views: 902

Answers (3)

styopdev
styopdev

Reputation: 2664

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>

Upvotes: 1

Deepak Agrawal
Deepak Agrawal

Reputation: 1301

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.

Upvotes: 1

A.T.
A.T.

Reputation: 26352

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

Upvotes: 0

Related Questions