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

вы можете использовать ng-таблицы для отображения ваших динамических данных

вот пример

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

, если какой-либо запрос спросит меня о комментарии

Answer 3

Восстановил его, изменив модель в контроллере, как показано ниже -

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

Окончательный вывод: