Angular js tabs content HTML tags not rendering

Question

I have one angularjs application. In that application if we click button we are displaying some content which have tabs. By clicking each tab corresponding data will be fetch and need to display there. So data i am getting dynamically. But problem is in below example, i have HTMl tags in content(EX:- "address":"<b>NewYork</b>"). But when i click address tab, it is displaying like <b>NewYork</b>,instead i need NewYork Kindly suggest me

$scope.tabs = [
       { title:'id', content:data[0].id, active:true },
       { title:'name', content:data[0].name,active:false},
       { title:'address', content:$sce.trustAsHtml(data[0].address),active:false},
       { title:'pin', content:data[0].pin,active:false}
];



<ul class="nav nav-tabs">
    <li ng-repeat="tab in tabs" ng-class="{active: tab.active}" >
            <a href="" ng-class="{active: tab.active}" ng-click="select(tab)" data-toggle="tab">{{tab.title}}</a>
    </li>
</ul>
<div class="tab-content">
    <div class="tab-pane fade in" ng-repeat="tab in tabs" ng-class="{active: tab.active}" style="width:100%">
        {{tab.content}}
    </div>
</div>

Ramesh Rajendran · Accepted Answer · 2015-03-11 08:42:21Z

1

You can solve this by using to_trusted filter

<a href="" ng-class="{active: tab.active}" ng-click="select(tab)" data-toggle="tab" ng-bind-html="tab.title | to_trusted"></a>

and add filter in your js side

angular.module("app", [])
.controller("ctrl", function ($scope) {
    //some code               
}).filter('to_trusted', ['$sce', function ($sce) {
    return function(text) {
        return $sce.trustAsHtml(text);
    };
}]);

edited Mar 11, 2015 at 8:42

answered Mar 11, 2015 at 8:32

Ramesh Rajendran

38.9k49 gold badges159 silver badges241 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Fasermaler · Accepted Answer · 2015-03-11 07:45:06Z

0

By default angular sanitizes your values to display any HTML tags as text, for obvious security reasons. If you want to include HTML from your objects in your templates, you can use the ng-bind-html="yourvalue" directive on your HTML elements, ie:

<span ng-bind-html="yourvalue"></span>

Or specifically for your case:

<a href="" ng-class="{active: tab.active}" ng-click="select(tab)" data-toggle="tab" ng-bind-html="tab.title"></a>

Keep in mind though that this isn't really a best practice in angular (tempting though it is, I've used it too often myself already). It all depends on your particular situation of course, but in general you might want to include this kind of markup in your template and/or include some property in your model with some significance and adjust your display based on that. For example, if city.isFavourite is true, you could conditionally add a favourite CSS class to it in your template.

To wrap it up, this page goes into some safety considerations when using HTML verbatim in your template: AngularJS API for $sanitize

edited Mar 11, 2015 at 7:45

answered Mar 11, 2015 at 7:22

Fasermaler

9436 silver badges14 bronze badges

2 Comments

Mohan Raja Over a year ago

Hi. Thank you for reply.. But here i am getting content data by repeating tabs array.so i have data in tab.content. So how can i use ng-bind-html?If you dont mind can you provide me sample code which i have given.

Fasermaler Over a year ago

I've added an example more specific to your code, I hope I got it right. Maybe it helps to note that ng-bind-html replaces {{ tab.title }}, which is kind of shorthand for ng-bind (when it's the only content in your tag that is).

Mohan Raja · Accepted Answer · 2015-03-11 09:03:37Z

0

Thank you so much guys. It is working fine now. I kept like below.

<div ng-bind-html="tab.content"></div>

answered Mar 11, 2015 at 9:03

Mohan Raja

1291 silver badge13 bronze badges

Collectives™ on Stack Overflow

Angular js tabs content HTML tags not rendering

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related