Question

我使用angular和angular-table在同一页面上显示多个表格。

我需要使用动态标头和动态内容创建动态表。

这是一个非动态标题的工作示例，但我找不到如何制作动态

控制器：

angular.module('plunker', ['ui.bootstrap',"angular-table","angular-tabs"]);

function ListCtrl($scope, $dialog) {

  $scope.cols= ['index','name','email'];
  $scope.list = [
      { index: 1,  name: "Kristin Hill",    email: "kristin@hill.com"    },
      { index: 2,  name: "Valerie Francis", email: "valerie@francis.com"  },
      ...
  ];
  $scope.config = {
      itemsPerPage: 5,
      fillLastPage: true
  };

}

HTML

 <!--  this work -->
<table class="table table-striped" at-table at-paginated at-list="list" at-config="config">
      <thead></thead>
      <tbody>
      <tr>
          <td at-implicit at-sortable at-attribute="name"></td>
          <td at-implicit at-sortable at-attribute="name"></td>
          <td at-implicit at-sortable at-attribute="email"></td>
      </tr>
      </tbody>
  </table>

<!-- this fail ... -->
<table class="table table-striped" at-table at-paginated at-list="list" at-config="config">
      <thead></thead>
      <tbody>
      <tr> 
          <td ng-repeat='col in cols' at-implicit at-sortable at-attribute="{{col}}"></td> 
      </tr>
      </tbody>
</table>

我错过了一些想法，或者这个模块是不可能的？

您是否知道另一个可以拥有动态标题和分页的模块？（我也尝试使用ngTable但有一些错误发布，数据没有显示）

Answer 1

通过以下代码，您可以生成动态标头

 <table class="table table-hover table-striped">
          <tbody>
            <tr class="accordion-toggle tblHeader">
              <th ng-repeat="(key, val) in columns">{{key}}</th>
            </tr>
            <tr ng-repeat="row in rows">
              <td ng-if="!$last" ng-repeat="col in key(row)" ng-init="val=row[col]">
              {{val}}
              </td>
            </tr>
          </tbody>
        </table>

Angular Script

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

    app.controller('myControl', function ($scope, $http) {

        $http.get('http://jsonplaceholder.typicode.com/todos').success(function (data) {
            $scope.columns = data[0];
            $scope.rows = data;
        }).error(function (data, status) {

        });

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

    });

角度角表动态标题名称

1 个答案: