Angularjs nested tabs bind to json

Question

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"
    ],
    "tab2": [
      "somedata1",
      "somedata2"
    ]
  },
  "MasterTab2": {
    "tab1": [
      "somedata1",
      "somedata2"      
    ],
    "tab2": [
      "somedata1",
      "somedata2"  
    ],
     "tab3": [
     "somedata1",
      "somedata2"  
    ]
  }
}

From above json(ignore somedata as its being used inside tabs) I want to create tabs as:

MasterTab1        MasterTab2
tab1  tab2         tab1 tab2 tab3

So basically the two tabs MasterTab1, MasterTab2 would always be there. But the child tabs under them may or may not be there and can be in any number. So when they click on MasterTab1 I want to show the relevant tabs tab1 & tab2. When they click on MasterTab2 I want to show relevant tabs tab1, tab2 & tab3.

Earlier I did not had parent child tabs so was using something like this to show tabs:

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

  myService.getTabData().then(function (res) {
    $scope.myTabsData = res;
 });

But now I am not sure how to do create this nested tabs stucture. Would appreciate if someone can help

@georgeawg no I have not created any custom directives. I am using angularjs 1.3.4 & bootstrap 3.3 — aman
– aman, Commented Jun 26, 2019 at 19:16

Lex · Accepted Answer · 2019-06-26 20:03:07Z

2

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

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

answered Jun 26, 2019 at 20:03

Lex

7,2732 gold badges31 silver badges49 bronze badges

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

5 Comments

aman Over a year ago

Lex does this works for angularjs 1.3.4 because we are using this version and cant upgrade to higher versions at this moment. If not is there some other solution? And for UI Bootstrap we are using 0.13.4

Lex Over a year ago

Yes, it should work with AngularJS 1.3.4, but I cannot stress this enough: do not use UI Bootstrap with AngularJS. You need to use the version that was specifically created for use with AngularJS by the Angular team. I linked to it in my answer.

aman Over a year ago

Lex I fully understand what you are trying to say but as pointed earlier we cannot upgrade at this moment so somehow I am trying to find a solution that fits this. I tried your solution with 1.3.4 but this does not work. I then tried my tabset using some of your changes and I was able to make some progress and its shows tabs. But the issue is that the child tabs are showing as lists not tabs and when I click on them it disappears. Could you check whats going on here: jsfiddle.net/Lbed98wy/2

Lex Over a year ago

You were missing a second <tabset></tabset> element. Here is an updated jsfiddle.

aman Over a year ago

Thanks lex this solves my issue for now. I have some table inside these tabs that binds the data foreach tabs. Having some issues with that but will post a separate ques for this if required.

Anis Mulla · Accepted Answer · 2019-06-26 18:40:11Z

0

Try This

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

edited Jun 26, 2019 at 18:40

answered Jun 26, 2019 at 18:33

Anis Mulla

857 bronze badges

2 Comments

aman Over a year ago

How would this create parent child tabs. I need to create 2 parent tabs master1 and master2 and within each these master tabs I need to create child tabs under each tab1 & tab & tab3

aman Over a year ago

I have created this demo jsfiddle.net/dcne1wvj can you update this demo to provide your solution

Collectives™ on Stack Overflow

Angularjs nested tabs bind to json

2 Answers 2

5 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related