如何修复表元素角JS的位置元素、位置、JS

由网友(听灵魂诉说)分享简介:我 JSON数据绑定到 NG-表使用角JS   如果任何值为null,则定位所有列被干扰  任何一个可以帮助我实现与列头固定数据?看到这个plunker http://plnkr.co/edit/Ixvp8B0dRwOBDHflmu2j?p= preVIEW 说明应空,但所有的值转移到左。 或如果所有的值都是空...

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

  

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

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

说明,但所有的值转移到左。

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

解决方案 如何用Javascript获取页面元素的位置

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

然后你可以使用该列配置阵列作为中继器的百分位> < TD>

举例配置:

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

HTML

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

实例配置创建

  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 [关键]> 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

阅读全文

相关推荐

最新文章