angularjs - Angular 1.x - 動的な行と列を含むテーブルを表示する方法

Question

目的 - 以下のように行と列の両方に動的なテーブルを表示します -

動的ヘッダー - 資金コードは、json オブジェクト配列からの「名前」の値です。

Application、Redempt、および 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>

現在のビューの表示: