使用angularJS将动态列绑定到表

Bind dynamic columns to a table using angularJS

本文关键字：绑定 动态 angularJS 使用      更新时间：2023-09-26

我正在从外部服务获取一些数据，并试图将其显示在表上。问题是，我从服务中获得的数据将是动态列，有时会有5列，另一次是8列。我不知道我该如何处理这件事。我认为使用像ng网格这样的东西并不是一个好的解决方案，因为只有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
        }]
    }];

});

所有数据项的列数是否相同？如果是的话，我想你可以这样做。

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>
相关文章：