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