Question

是否可以使用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>

是否可以删除所有硬编码并使范围变量确定列名和数据？

快速编辑：继续快速查看当前状态的数据。我需要键中的键：此对象的值元素。有没有办法用纯javascript获取这些值？

Answer 1

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

角：

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>

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

Answer 2

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

让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>

Answer 3

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

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

Answer 4

   <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>

具有动态列名称的角表

4 个答案: