如何固定表格元素 Angular.js 的位置 [英] How to fix the positions of table elements Angular.js

问题描述

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

如果任何值为空，则所有列的位置都会受到干扰.如何修复带有列标题的数据?

查看此 Plunker:http://plnkr.co/edit/Ixvp8B0dRwOBDHflmu2j?p=preview

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

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

解决方案

为了确定列是否为空，您需要某种列配置，通过迭代数据来查看是否所有行都包含任何列的数据标题(对象键).

然后您可以使用该列配置数组作为 和 的转发器.

示例配置:

<预><代码>[{"heading": "身份证",显示":真},{"heading": "标题",显示":真},{"heading": "说明",显示":真},{"heading": "测试",显示":假}]

HTML

<tr><th ng-repeat="colconfig 中的col" ng-if="col.display">{{col.heading}}</th></tr></thead><tr ng-repeat="数据中的项目"><td ng-repeat="colConfig 中的col" ng-if="col.display">{{item[col.heading]}}</td></tr></tbody>

示例配置创建

 var keys = Object.keys(data[0]);函数创建配置(){var validKeyCounts = {};var colConfig;键.forEach(功能(键){validKeyCounts[key] = 0;})data.forEach(函数(行，idx){键.forEach(功能(键){if (row.hasOwnProperty(key) && row[key] !== null) {validKeyCounts[key]++;}})});colConfig = keys.map(function (key) {返回 {标题:关键，显示:validKeyCounts[key]>0}});返回 colConfig}

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

演示

I'm binding JSON data to ng-table using Angular.js.

If any value is null then positions for all columns gets disturb. How can I fix the data with column header?

See this Plunker: http://plnkr.co/edit/Ixvp8B0dRwOBDHflmu2j?p=preview

Description should be null but all values shifted to left.

Or, if all values are null for any property hide that particular column.

解决方案

In order to determine if a column is empty you need some sort of column configuration that gets created by iterating the data to see if all rows contain data for any of the headings (object keys).

Then you can use that column configuration array as the repeater for the <th> and <td>.

Example config:

[
  {
    "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>

Example config create

  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

  }

I'm sure this could be optimized but is just a way to get started with functionality wanted

DEMO

这篇关于如何固定表格元素 Angular.js 的位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！