Question

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

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}];

但我可以举例说，不包括麻疹病毒。

那么如何在不手动创建具有各自标题的所有列的情况下创建表格呢？

我试过这样的事情：

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

enter image description here

我从另一篇文章中得到的notSorted函数讨论了如何保证对象的迭代顺序。必须确保列和标题的顺序相同。如果您不需要列标题，可以简化并删除它。

并且ng-if会遗漏一个我认为也由notSorted函数引入的无关列。如果你摆脱了标题，可能也没有。

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中创建具有可变数量的列和动态标题的表？ pref使用ng-tables

1 个答案: