CODEWITHSUNDEEP
htmlangularjstabs
Mohan Raja
Mohan Raja

Reputation: 129

Angular js tabs content HTML tags not rendering

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>

Upvotes: 3

Views: 1357

Answers (3)

Mohan Raja
Mohan Raja

Reputation: 129

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

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

Upvotes: 0

Ramesh Rajendran
Ramesh Rajendran

Reputation: 38683

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

Upvotes: 1

Fasermaler
Fasermaler

Reputation: 943

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

Upvotes: 0

Related Questions