angularjs - Angular 1.x - 如何显示具有动态行和列的表格

Question

目标 - 为行和列显示一个动态表，如下所示 -

动态标题 - 基金代码是 json 对象数组中“名称”的值。

具有 Application、Redemption 和 Net 值的动态行

JSON对象：

[
            {
                name: 'VBIF',
                application: 1000,
                redemption: -200,
                netAppRed: 800
            },
            {
                name: 'VCIF',
                application: 1500,
                redemption: -200,
                netAppRed: 800
            },
            {
                name: 'VMPF',
                application: 2000,
                redemption: 0,
                netAppRed: 2000
            },
            {
                name: 'VBIF-A',
                application: 800,
                redemption: 100,
                netAppRed: 700
            },
            {
                name: 'VMPF-A',
                application: 43540,
                redemption: 12550,
                netAppRed: 30990
            }
        ]

HTML：

        <div class="table-responsive">
            <table class="table table-striped">
                <thead>
                <tr>
                    <th>Fund Code</th>
                    <th>Application</th>
                    <th>Redemption</th>
                    <th>Net Application Redemption</th>
                </tr>
                </thead>
                <tbody>
                <tr data-ng-repeat="cashflow in cashflows">
                    <td>{{cashflow.name}}</td>
                    <td>{{cashflow.application | currency}}</td>
                    <td>{{cashflow.redemption | currency}}</td>
                    <td>{{cashflow.netAppRed | currency}}</td>
                </tr>
                </tbody>
            </table>
        </div>

当前视图显示：

Answer 1

无需更改模型的另一种选择：

<div class="table-responsive">
            <table class="table table-striped">
                <thead>
                <tr>
                    <th>Fund Code</th>

                    <th data-ng-repeat="cashflow in cashflows">{{cashflow.name}} </th>
                </tr>
                </thead>
                <tbody>
                <tr >
                    <td>Application</td>
                    <td data-ng-repeat="cashflow in cashflows">{{cashflow.application | currency}}</td>

                </tr>
                <tr >
                    <td>Redemption</td>
                    <td data-ng-repeat="cashflow in cashflows">{{cashflow.redemption | currency}}</td>

                </tr>
                <tr >
                    <td>NetAppRed</td>
                    <td data-ng-repeat="cashflow in cashflows">{{cashflow.netAppRed | currency}}</td>

                </tr>
                </tbody>
            </table>
        </div>

Answer 2

通过更改控制器中的模型来解决它，如下所示 -

$scope.getHeaders = function (){

    var keys = [];
    angular.forEach(object, function (val, key) {
        if(key !== '$$hashKey') { keys.push(key); }
    });
    return keys;
};

$scope.getValue = function () {
    var values = [];
    angular.forEach(object, function (val, key) {
        if(key !== '$$hashKey') { values.push(val); }
    });
    return values;
};

HTML 更新如下 -

               <div class="table-responsive">
                <table class="table table-striped">
                    <thead>
                    <tr>
                        <th></th>
                        <th ng-repeat="(header, value) in cashflows">
                            {{value.name}}
                        </th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>Application</td>
                        <td ng-repeat="row in cashflows">
                            {{row.application}}
                        </td>
                    </tr>
                    <tr>
                        <td>Redemption</td>
                        <td ng-repeat="row in cashflows">
                            {{row.redemption}}
                        </td>
                    </tr>
                    <tr>
                        <td>Net App & Red</td>
                        <td ng-repeat="row in cashflows">
                            {{row.netAppRed}}
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>

最终输出：

Answer 3

您可以使用 ng-tables 显示您的动态数据

这是示例

[ https://www.tutlane.com/tutorial/angularjs/angularjs-tables-with-ng-table][1]

如果有任何疑问问我评论