如何在Angular中創建具有可變數量的列和動態標題的表格？ pref using ng-tables

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

但我可能例如，沒有包含MeaslesCR。

那麼，如何創建一個表，而無需手動創建所有列與他們各自的標題？

我想是這樣的：

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 ect）填充這些列？

如果我的問題有點混亂，我很抱歉，因爲我覺得自己有點困惑。

非常感謝。

Answer 1

花了一些工作，但這是一個工作plnkr做我認爲你想要做的。

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

的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