如何在 AngularJs 个选项卡中显示动态内容？

Question

我有一个带标签的 table，其中还有一个 table，我如何动态显示每个标签的唯一数据？

选项卡代码：

                        <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>

这是我得到结果的方式：

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

这是我在 vm.tabs - https://gist.github.com/Taifunov/c75d6d3d7ed6a32c2e9fdae24f24ae22

中得到的结果

Answer 1

您的重复变量有误。第一个 ng-repeat tab in tabs（不应该是 tab in vm.tabs 吗？）设置变量 tab 以在循环中使用。

然后，当您迭代 table 个单元格时，不要再次循环 tabs - 循环 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>

如何在 AngularJs 个选项卡中显示动态内容？

How to show dynamic content in AngularJs Tabs?

javascript

angularjs