CODEWITHSUNDEEP
htmlangularjstabs
Pujan
Pujan

Reputation: 69

Html page instead of text in scope angularjs

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

});

Upvotes: 0

Views: 23

Answers (1)

Sachila Ranawaka
Sachila Ranawaka

Reputation: 41447

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

Upvotes: 1

Related Questions