使用 angularJS 将动态列绑定到表

Question

我正在从外部服务获取一些数据，并尝试将其显示在表格上。问题是我从服务中获得的数据将包含动态列，有时会有 5 列，有时会有 8 列。我不知道如何在 ng-repeat 中处理它。我认为使用ng-grid 之类的东西不是一个好的解决方案，因为只有 10 行可以显示。为此，如果我使用任何外部解决方案，那将是一个开销。有没有任何角度的方法来实现这一点？如果不是这个小数据的最佳选择是什么。

注意：列名也是动态的 我的代码

<div ng-app='myApp' ng-controller="MainCtrl">
<div ng-repeat="prdElement in packageElement track by $index" class="package-grid">
    <table class="hovertable">
        <thead>
            <tr>
                <th>Line #</th>
                <th>Quantity in Plt</th>
                <th>Allready Packed</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="data in prdElement.Data" ng-init="data.newquantity  = 0">
                <td>{{data.itemId}}</td>
                <td>
                    {{data.quantity}}
                </td>
                <td>{{data.packed}}</td>
            </tr>
        </tbody>
    </table>
</div>

angular.module('myApp', []).controller('MainCtrl', function ($scope) {
    var counter = 0;
    $scope.packageElement = [{
        name: counter,
        show: true,
        Data: [{
            name: 'item 1',
            itemId: '284307',
            quantity: '100',
            packed: 0

        }, {
            name: 'item 2',
            itemId: '284308',
            quantity: '200',
            packed: 0
        }]
    }];



});

Answer 1

所有数据项的列数是否相同？如果是这样，我认为您可以这样做。

1。在您的范围内定义一个函数，为您提供对象键：

$scope.keys = function(obj) {
    var key;
    var keys = [];
    for (key in obj) {
        if (key === "$$hashKey") break; //angular adds new keys to the object
        if (obj.hasOwnProperty(key)) keys.push(key);
    }
    return keys;
  }

2。在表头上使用中继器（如果对象可以有不同的属性，则需要找到属性/列数最多的对象）

<th ng-repeat="key in keys( prdElement.Data[0] )">{{key}}</th>

3。在表格单元格上使用中继器

<td ng-repeat="key in keys( prdElement.Data[0] )">{{ data[key] }}</td>