Display dynamic HTML as tab content in Angular UI

Question

In this plunk I have a Angular UI tabs with HTML content that needs to be generated dynamically. Still, the tab contents shows instead the HTML markup. How to fix this?

HTML

 <uib-tabset>
    <uib-tab index="$index + 1" ng-repeat="tab in tabs" heading="{{tab.title}}">
      {{tab.content}}
    </uib-tab>
 </uib-tabset>

Javascript

var app = angular.module('ui.bootstrap.demo', ['ui.bootstrap']);

app.controller('ctl', function ($scope) {

     $scope.tabs = [
                    { title:'title 1', content:'<div id="id1">111</div>' },
                    { title:'title 2', content:'<div id="id2">222</div>' }
                  ];
});

ps0604 · Accepted Answer · 2017-04-02 22:50:35Z

1

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

 <uib-tabset>
    <uib-tab index="$index + 1" ng-repeat="tab in tabs" heading="{{tab.title}}">
      <div ng-bind-html="tab.content"></div>
    </uib-tab>
  </uib-tabset>

answered Apr 2, 2017 at 22:50

ps0604

1,21728 gold badges157 silver badges379 bronze badges

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

Collectives™ on Stack Overflow

Display dynamic HTML as tab content in Angular UI

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related