How to show dynamic content in AngularJs Tabs?

user_3764629 0
Viewed 44

I have a table with tabs in which there is also a table, how can I dynamically show unique data for each tab?

This hiw it's look like

Code for tabs: 

                        <md-tab ng-repeat="tab in tabs" label="{{tab.title}}">
                            <md-card layout="column" flex>
                                <md-tab-body>
                                    <md-table-container md-scroll-y layout-fill layout="column" class="md-padding table-scroll">
                                        <table md-table md-progress="promise" style="font-size: 11px !important;">
                                            <thead md-head md-order="query.order">
                                                <tr md-row>
                                                    <th md-column ng-repeat="tab in tabs track by tab.id"> {{ tab.content.Key }}</th>
                                                </tr>
                                            </thead>
                                            <tbody md-body>
                                                <tr md-row>
                                                    <td ng-repeat="tab in tabs track by tab.id" md-cell>{{ tab.content.Value }}</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </md-table-container>
                                </md-tab-body>
                            </md-card>
                        </md-tab>
                    </md-tabs>

This how i get the result:

function getSummaryReportSchema(transactionid) {
   transactionService.getSummaryReportSchema(transactionid, orgName)
        .then((result) => {
            var idx = 0;
            result.forEach((element => {
                var parsed = JSON.parse(element.Values.replace(/\r\n/g, ''));

                vm.masterDetailResults.push(parsed);
                vm.tabs.push({
                    id: idx++,
                    title: element.TaskName,
                    content: parsed
                });
            }));
        });
};

And this is result which i get in vm.tabs - https://gist.github.com/Taifunov/c75d6d3d7ed6a32c2e9fdae24f24ae22

angularjs javascript
1 Answers

You have the wrong variables in your repeats. The first ng-repeat tab in tabs (shouldn't that be tab in vm.tabs?) sets the variable tab to use in your loop.

Then, when you are iterating the table cells, don't loop through tabs again - loop though tab.content.

<table md-table md-progress="promise" style="font-size: 11px !important;">
    <thead md-head md-order="query.order">
        <tr md-row>
            <th md-column ng-repeat="content in tab.content"> {{ content.Key }}</th>
        </tr>
    </thead>
    <tbody md-body>
        <tr md-row>
            <td ng-repeat="content in tab.content" md-cell>{{ content.Value }}</td>
        </tr>
    </tbody>
</table>
user_17729330
Related