angularjs 如何 ng-repeat 数组值作为列标题

Question

如何ng-repeat下面数组的值作为我的ng-table的列标题？
我试图将 $scope.cols 数组的值显示为我的 table 的列标题，换句话说，作为字段，并显示所有行。

这是我的尝试：

<div ng-controller="mycontroller as projects">
    <table ng-table-dynamic="projects.tableParams with projects.cols"
           show-filter="true" class="table table-bordered table-striped">
        <tr ng-repeat="row in $data">
            <td ng-repeat="col in $columns">{{::row[col.field]}}</td>
        </tr>
    </table>
</div>

这是我的控制器：

app.controller('mycontroller', ["$scope", "$filter", "ngTableParams", "DatabaseRef", "$firebaseArray",
function ($scope, $filter, ngTableParams, DatabaseRef, $firebaseArray) {

    //show all projects

    var showallprojects = DatabaseRef.ref("projects").orderByKey();
    $scope.allprojectslist = $firebaseArray(showallprojects);
    var data = $scope.allprojectslist;
    data.$loaded().then(function(data) {
        console.log(data.length); // data is loaded here
        $scope.cols = Object.keys(data[0]);
        console.log($scope.cols);
        $scope.tableParams = new ngTableParams({
            page: 1, // show first page
            count: 7, // count per page
            sorting: { country: "asc" },
            filter : {
            }
        }, {
            filterSwitch: true,
            total: 0, //data.length, // length of data
            getData: function ($defer, params) {
                // use build-in angular filter
                var filteredData = params.filter() ?
                    $filter('filter')($scope.allprojectslist, params.filter()) :
                    $scope.allprojectslist;             
                var orderedData = params.sorting() ?
                    $filter('orderBy')(filteredData, params.orderBy()) :                    
                    $scope.allprojectslist;

                params.total($scope.allprojectslist.length);
                // set total for recalc pagination
                $defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));                
            }
        });
    });
}]);

注：

ngtable 动态模型取自 here and the doc is here。

Answer 1

编辑

我可能误解了你的问题，我认为上面的代码不是 st-table 示例的副本。

在您的场景中，如果您想将每个 $scope.cols 值显示为标题，您需要 ng-repeat="col in cols" 并打印出您当前的列值 {{col}}。

我假设 table 的 body 中的 data 是一个 object 数组，每个 object 是以 [col] => value.

的形式

我正在更新下面的代码示例。

您只需要更好地构建您的 table。

<div ng-controller="mycontroller as projects">
  <table ng-table-dynamic="projects.tableParams with projects.cols"
       show-filter="true" class="table table-bordered table-striped">
   <thead>
    <tr>
       <th ng-repeat="col in cols">{{col}}</th>
    </tr>
   </thead>
   <tbody>
    <tr ng-repeat="row in data">
      <td ng-repeat="col in col">{{ row[col] || "empty"}}</td>
    </tr>
   </tbody>
  </table>
</div>

所以基本上我们循环一次 $columns 数组来构建 table 的标题；然后我们循环 $data 数组以获得 objects 的数组（我想），并且每次迭代都是一个新行；然后在每一行中，我们再次循环 $columns 数组以获得我们正在寻找的 col.field，并且每次迭代都会在我们的行中生成一个新的 <td>。

希望对您有所帮助。

angularjs 如何 ng-repeat 数组值作为列标题

angularjs how to ng-repeat array values as column headings

arrays

angularjs

ng-repeat

angularjs-ng-repeat

firebase-realtime-database

注：