如何修复表元素角JS的位置 [英] how to fix the positions of table elements angular js

问题描述

我 JSON数据绑定到 NG-表使用角JS

  

如果任何值为null，则定位所有列被干扰
  任何一个可以帮助我实现与列头固定数据？

看到这个plunker http://plnkr.co/edit/Ixvp8B0dRwOBDHflmu2j?p= preVIEW

说明应空，但所有的值转移到左。

 或
如果所有的值都是空的任何属性隐藏特定列
 

解决方案

为了确定列是否为空，你需要一些列的配置，获取通过遍历数据，看看是否所有行包含数据的创建标题（对象键）。

然后你可以使用该列配置阵列作为中继器的百分位＆GT; 和＆LT; TD＆GT; 。

举例配置：

  [
  {
    标题：ID，
    显示：真
  }，
  {
    标题：标题，
    显示：真
  }，
  {
    标题：说明，
    显示：真
  }，
  {
    标题：测试，
    显示：假的
  }
]
 

HTML

 ＆LT;＆THEAD GT;
    ＆所述; TR＆GT;
      百分位纳克重复=栏在colConfigNG-如果=col.display＆GT; {{col.heading}}＆下; /第i
    ＆LT; / TR＆GT;
  ＆LT; / THEAD＆GT;
  ＆LT;＆TBODY GT;
    ＆LT; TR NG重复= GT中的数据项＆;
      ＆LT; TD NG重复=山坳中colConfigNG-IF =col.display＆GT;
        {{项目[col.heading]}}
      ＆LT; / TD＆GT;
    ＆LT; / TR＆GT;
  ＆LT; / TBODY＆GT;
 

实例配置创建

  VAR键= Object.keys（数据[0]）;  功能createConfig（）{
      变种validKeyCounts = {};
      VAR colConfig;
      keys.forEach（功能（键）{
          validKeyCounts [关键] = 0;
      }）
      data.forEach（函数（行，IDX）{
          keys.forEach（功能（键）{
              如果（row.hasOwnProperty（键）及和放大器;！行[关键] == NULL）{
                  validKeyCounts [关键] ++;
              }
          }）
      }）;      colConfig = keys.map（功能（键）{
          返回{
              标题：键，
              显示：validKeyCounts [关键]＆GT; 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 can any one help me to fix 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

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