我如何在 Angular 中创建具有可变数量的列和动态标题的 table？优先使用 ng-tables

Question

我正在尝试使用 ng-tables 从一组数据中创建一个 table。每次的数据可能都不一样。例如，我有这些数据：

var data = [

    {name: "St.Gabriels",        MeaslesCR: 50, ANC: 30, OPD: 20, SCORE: 100},
    {name: "N'Lale",             MeaslesCR: 52, ANC: 33, OPD: 20, SCORE: 90},
    {name: "Centrum Hospital",   MeaslesCR: 20, ANC: 70, OPD: 30, SCORE: 80},
    {name: "Something Hospital", MeaslesCR: 20, ANC: 50, OPD: 30, SCORE: 70},
    {name: "Wohoo Clinic",       MeaslesCR: 50, ANC: 30, OPD: 40, SCORE: 60}];

但我可能不包括 MeaslesCR。

那么如何创建 table 而无需手动创建所有列及其各自的标题？

我试过这样的事情：

var indicators = [];

//Getting indicator names
angular.forEach(data[0], function(value, key){
    indicators.push(key);
});

$scope.getTitle = function(i){
    return indicators[i];
}

$scope.tableParams = new ngTableParams({
    page: 1,            // show first page
    count: 10          // count per page
}, {
    total: data.length, // length of data
    getData: function($defer, params) {
        // use build-in angular filter
        var orderedData = params.sorting() ?
            $filter('orderBy')(data, params.orderBy()) :
            data;
        $defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
    }
});

和

    <table ng-table="tableParams" class="table">
        <tr ng-repeat="user in $data">
            <td data-title="getTitle($index)" sortable="Name">
                {{user.name}} // pref user.getTitle($index)
            </td>
        </tr>
    </table>

html 代码显然只写入一个单元格，但我能否让它以某种方式写出“$data.length”个单元格（本例 5）？

动态标题使用 getTitle($index) 或其他更好的替代方法？

然后用它们各自的 user.varValue(user.name, user.MeaslesCR 等)?

填充这些列

如果我的问题有点混乱，我很抱歉，因为我觉得我自己也有点混乱。

非常感谢。

Answer 1

做了一些工作，但这是一个有效的 plnkr 可以完成我认为您正在尝试做的事情。

http://plnkr.co/edit/7SqPoD2u323KKzi0SYpa?p=preview

我从另一个 post 讨论如何保证 object 上的迭代顺序的 notSorted 函数。需要确保列和 headers 的顺序相同。如果不需要 headers.

列，则可以简化并删除它

而 ng-if 是为了省去一个我认为也是由 notSorted 函数引入的无关列。如果你去掉 headers.

可能也没有

html:

<table border=1>
  <thead>
    <tr>
      <th ng-repeat="key in notSorted(cols)" ng-init="value=cols[key]">{{value}}</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="row in data">
      <td ng-if="!$last" ng-repeat="dat in notSorted(row)" ng-init="value=row[dat]">{{value}}</td>
    </tr>
  </tbody>
</table>

脚本：

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';

  $scope.data = [
    {name: "St.Gabriels",        MeaslesCR: 50, ANC: 30, OPD: 20, SCORE: 100},
    {name: "N'Lale",             MeaslesCR: 52, ANC: 33, OPD: 20, SCORE: 90},
    {name: "Centrum Hospital",   MeaslesCR: 20, ANC: 70, OPD: 30, SCORE: 80},
    {name: "Something Hospital", MeaslesCR: 20, ANC: 50, OPD: 30, SCORE: 70},
    {name: "Wohoo Clinic",       MeaslesCR: 50, ANC: 30, OPD: 40, SCORE: 60}
  ];

  $scope.cols = Object.keys($scope.data[0]);

  $scope.notSorted = function(obj){
    if (!obj) {
        return [];
    }
    return Object.keys(obj);
}
});

在此处找到 notSorted() 函数：

https://groups.google.com/forum/#!topic/angular/N87uqMfwcTs

我如何在 Angular 中创建具有可变数量的列和动态标题的 table？优先使用 ng-tables

How do i create a table with a variable amount of columns and dynamic titles in Angular? pref using ng-tables

angularjs

angularjs-ng-repeat

ngtable