AngularJS: Get data from object under multiple tabs

Question

Using Angular here:

I am creating dynamic controls and tabs based on the json I get. So if my incoming json object is like below then I am creating 2 master tabs and then child tabs under them.

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

Now each child tabs can have some controls under them, like textbox, dropdowns etc example as below:

 <tabset class="tabbable-line">
    <tab ng-repeat="(key,value) in tabstest1" heading="{{key}}">
      <tabset class="tabbable-line">
        <tab class="tabbable-line" ng-if="key=='MasterTab1'" ng-repeat="(k2,v2) in value" heading="{{k2}}">
        {{ v2 }}
        </tab>
        <tab class="tabbable-line" ng-if="key=='MasterTab2'" ng-repeat="(k2,v2) in value" heading="{{k2}}">
        {{ v2 }}
        </tab>
      </tabset>
    </tab>
  </tabset>

I have created demo as below. The demo contains few controls that can be inside the tabs.

Demo https://jsfiddle.net/43qj5kys/1/

What I am stuck is, once user fills in the controls and the data how shall I get the data from there.

I have a button click, when the user clicks on this button I want to get all the data which the user selected in all the controls of these tabs.

Any inputs are appreciated.

Anyone?

Why are you using such an obsolete, old version of angular-ui-bootstrap? The answer you accepted two days ago used a more relevant version of the library. — georgeawg
– georgeawg, Commented Jun 29, 2019 at 0:45
@georgeawg if you see the comment I posted there I mentioned that I am using that version and I cannot upgrade that at this point. I accepted that answer as I used that answer code to fit my case. Would you have inputs on my question above? — aman
– aman, Commented Jul 1, 2019 at 12:06
Are you talking about something like this: jsfiddle.net/fg3b18t7 ? — Alon Eitan
– Alon Eitan, Commented Jul 1, 2019 at 15:27

qwertz · Accepted Answer · 2019-06-28 20:12:28Z

0

The data will be stored in properties of $scope.master1 and $scope.master2, after you defined them as objects in your controller.

$scope.master1 = {};
$scope.master2 = {};

see example here: https://jsfiddle.net/6znkufs2/

answered Jun 28, 2019 at 20:12

qwertz

2,30919 silver badges16 bronze badges

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

1 Comment

aman Over a year ago

querty this does not fully work. When I change the dropdown it does update the json. But for my second row when I update that it replaces my json with the value selected. What I want is to construcct the entire json with all the values from all the tabs.

Collectives™ on Stack Overflow

AngularJS: Get data from object under multiple tabs

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related