具有动态列名的角度表答案

【问题标题】：angular table with dynamic column names具有动态列名的角度表
【发布时间】：2016-04-19 02:36:31
【问题描述】：

是否可以在不定义“ng-repeat”之前的列名的情况下使用 angular.js 填充表？例如，这就是我当前填充表格的方式..

                     <table class="table">
                        <thead>
                          <tr>
                            <th>Arup Mnemonic</th>
                            <th>Organism</th>
                            <th>Test</th>
                            <th>Result</th>
                            <th>Source</th>
                            <th>Source Value</th>
                          </tr>
                        </thead>
                        <tbody>
                          <tr ng-repeat="x in data">
                            <td>{{ x.Arup_Mnemonic }}</td>
                            <td>{{ x.organism }}</td>
                            <td>{{ x.test }}</td>
                            <td>{{ x.result }}</td>
                            <td>{{ x.source }}</td>
                            <td>{{ x.source_value }}</td>
                          </tr>
                        </tbody>
                    </table>

是否可以删除所有硬编码并让范围变量与数据一起确定列名？

快速编辑：快速查看当前状态下的数据。我需要该对象的 key:value 元素中的键。有没有办法用纯 javascript 获得这些值？

【问题讨论】：

为什么不：<thead> <tr> <th ng-repeat="column in columns">{{column}}</th> </tr> </thead>？
当然，只要在控制器中定义列的名称，就像data一样。
谢谢这是个好主意，请查看编辑@Vidul

标签： javascript angularjs html-table

【解决方案1】：

   <tr data-ng-repeat="(key,val) in gridData">
                                <th></th>
                                <th data-ng-repeat="col in columns" data-ng-init="CurrKey = col.key">{{val[CurrKey]}}
                                </th>
                            </tr>

【讨论】：

【解决方案2】：

我的理解是，您事先并不知道这些列是什么。因此，您需要第一个对象的键来了解列是什么。

角度：

var obj = data[0];
$scope.columns =  Object.keys(obj).filter(function(key) {
  if (obj.hasOwnProperty(key) && typeof key == 'string') {
    return key;
  }
});

$scope.format = function(str) {
    return str.replace('_',' '); //do the rest of the formatting here. 
}

html:

<table class="table">
  <thead>
    <tr>
      <td ng-repeat="column in columns">
        {{format(column)}}
      </td>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="datum in data">
      <td ng-repeat="column in columns">
        {{datum[column]}}
      </td>
    </tr>
  </tbody>
</table>

编辑：在从对象中获取键时，将另一个答案中的键过滤器作为良好做法。

【讨论】：

obj 来自哪里？
是的，正如@Vidul 指出的那样，我收到“未定义 obj”错误。我尝试使用数据和其他变量对其进行破解，但此示例不起作用
非常正确，忘记了我正在处理数据[0]。已编辑
@NickNasirpour 复制粘贴时，至少下次尝试修复我的错误。
@Vidul，我花时间相信你的回答......众所周知，你应该使用 hasOwnProperty 并确保密钥是一个字符串。您可能也从其他地方复制粘贴。

【解决方案3】：

一个可能的解决方案（请注意，这未经测试）：

// in controller
$scope.headlines = Object.keys(data[0]).filter(function(key) {
    if (data[0].hasOwnProperty(key) && typeof key == 'string') {
        return key;
    }
});

【讨论】：

【解决方案4】：

为什么不为您的标题使用自己的模型来迭代它？

让headlines 成为一个数组，包含所有可能的标题，每个索引一个。

<table class="table">
  <thead>           
    <tr ng-repeat="headline in headlines"> 
      <th>{{ headline }}</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="x in data">
      <td>{{ x.Arup_Mnemonic }}</td>
      <td>{{ x.organism }}</td>
      <td>{{ x.test }}</td>
      <td>{{ x.result }}</td>
      <td>{{ x.source }}</td>
      <td>{{ x.source_value }}</td>
    </tr>
  </tbody>
</table>

【讨论】：

这和@Vidul的思路一样，但是如何获取headline变量呢？
与您对 data 对象所做的方式完全相同。只需在$scope 中定义一个对象，在这种情况下它可能是$scope.headlines = { YOUR DATA HERE }。以这种速度，您可以拥有一个数组，保留所有可能的头条新闻。在这种情况下，您只需执行headline in headlines 并使用{{ headline }} 填充您的<th>元素。我已经相应地编辑了我的帖子。