Html page instead of text in scope angularjs

Question

I am new to Angularjs and i am starting to play with tabs in angularJS. The example I picked up directly from AngularJS-UI-Bootstrap webpage. So my end goal is to add dynamic html content inside tabs rather then simple text. How should i approach ? my html looks like this

 <div ng-controller="chatsController">
   <h1> Anguchat </h1>
   <hr/>
   <uib-tabset active="active">
       <uib-tab index="$index + 1" ng-repeat="tab in tabs" heading="{{tab.title}}" disable="tab.disabled">
          {{tab.content}}
       </uib-tab>
   </uib-tabset>
</div>

And my angular controller looks like this.

angular.module('anguchat', ['ui.bootstrap']);
angular.module('anguchat').controller('chatsController', function ($scope, $window) {

  $scope.tabs = [
    { title:'Room1', content:'I want to add html here' },
    { title:'Room2', content:'Dynamic content 2' }
  ];

});

Sachila Ranawaka · Accepted Answer · 2017-03-24 03:56:39Z

1

Can use ng-include to add html template to the DOM

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


$scope.tabs = [
    { title:'Room1', content:'template1.html' },
    { title:'Room2', content:'template2.html' }
];

Demo

answered Mar 24, 2017 at 3:56

Sachila Ranawaka

41.6k8 gold badges62 silver badges87 bronze badges

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

Collectives™ on Stack Overflow

Html page instead of text in scope angularjs

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