如何固定 table 个元素的位置 Angular.js

Question

我正在使用 Angular.js 将 JSON 数据绑定到 ng-table。

如果任何值为空，则所有列的位置都会受到干扰。如何修复 header 列的数据？

看到这个 Plunker：http://plnkr.co/edit/Ixvp8B0dRwOBDHflmu2j?p=preview

Description 应该是 null 但所有值都向左移动。

或者，如果任何属性的所有值都为空，则隐藏该特定列。

Answer 1

为了确定列是否为空，您需要某种列配置，它通过迭代数据来创建，以查看是否所有行都包含任何标题（object 键）的数据。

然后您可以使用该列配置数组作为 <th> 和 <td> 的转发器。

示例配置：

[
  {
    "heading": "Id",
    "display": true
  },
  {
    "heading": "Title",
    "display": true
  },
  {
    "heading": "Description",
    "display": true
  },
  {
    "heading": "Test",
    "display": false
  }
]

HTML

<thead>
    <tr>
      <th ng-repeat="col in colConfig" ng-if="col.display">{{col.heading}}</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="item in data">
      <td   ng-repeat="col in colConfig"  ng-if="col.display">
        {{item[col.heading]}}
      </td>
    </tr>
  </tbody>

示例配置创建

  var keys = Object.keys(data[0]);

  function createConfig() {
      var validKeyCounts = {};
      var colConfig;
      keys.forEach(function (key) {
          validKeyCounts[key] = 0;
      })
      data.forEach(function (row, idx) {
          keys.forEach(function (key) {
              if (row.hasOwnProperty(key) && row[key] !== null) {
                  validKeyCounts[key]++;
              }
          })
      });

      colConfig = keys.map(function (key) {
          return {
              heading: key,
              display: validKeyCounts[key] > 0
          }
      });
      return colConfig

  }

我确信这可以优化，但这只是开始使用所需功能的一种方式

DEMO

如何固定 table 个元素的位置 Angular.js

How to fix the positions of table elements Angular.js

html

javascript

jquery

angularjs

ngtable