Angularjs Nested Tabs Bind To Json

Using angularjs 1.3.4 & ui-bootstrap-tpls 0.13.4 and bootstrap 3 css I have a json as below: 'MasterTab1': { 'tab1': [ 'somedata1', 'somedata2'

Solution 1:

Couple things here:

1) Don't use Bootstrap UI with Angular. It requires jQuery which is a DOM-manipulation framework just like AngularJS is a DOM-manipulation framework. Trying to use both of those together is a recipe for frustration. Instead use the AngularJS specific Angular-UI-Bootstrap library that was created for the sole purpose of using Bootstrap stuff in Angular without the requirement on the full jQuery framework.

2) Since your JSON data is loosely structured you can't use the standard ng-repeat="object in collection" directive. Instead you need to use ng-repeat="(key, value) in collection".

Using your sample, here's how you would use the UIB tabset directive to create a nested tab UI from your JSON:

angular.module('app', ['ui.bootstrap'])
  .controller('ctrl', function() {
    this.tabs = {
      "MasterTab1": {
        "tab1": ["somedata1-1", "somedata1-2"],
        "tab2": ["somedata2-1", "somedata2-2"]
      },
      "MasterTab2": {
        "tab1": ["somedata2-1-1", "somedata2-1-2"],
        "tab2": ["somedata2-2-1", "somedata2-2-2"],
        "tab3": ["somedata2-3-1", "somedata2-3-2"]
      }
    };
  });

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.min.js"></script><linkhref="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" /><divng-app="app"ng-controller="ctrl as $ctrl"><uib-tabset><uib-tabng-repeat="(key,value) in $ctrl.tabs"heading="{{ key }}"><uib-tabset><uib-tabng-repeat="(k2,v2) in value"heading="{{ k2 }}">
          {{ v2 }}
        </uib-tab></uib-tabset></uib-tab></uib-tabset></div>

Solution 2:

Try This

<tabset ng-repeat="tabs in myTabsData"><tabset ng-repeat="tab in tabs>
  <tab>{{tab}}</tab>
 </tabset>
</tabset>