Javascript 如果使用angular js的任何属性的所有json值都为null，如何隐藏表列

如果任何属性的所有json值都为空，如何隐藏表列 使用角度js

index.js

var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
  $scope.isArray = angular.isArray;
  $scope.data = [{
    "Id": null,
    "Title": "US",
    "Description": "English - United States",
    "Values": [{
      "Id": 100,
      "LanId": 1,
      "KeyId": 59,
      "Value": "Save"
    }]
  }, {
    "Id": null,
    "Title": "MX",
    "Description": "test",
    "Values": [{
      "Id": 100,
      "LanId": 1,
      "KeyId": 59,
      "Value": "Save"
    }]
  }, {
    "Id": null,
    "Title": "SE",
    "Description": "Swedish - Sweden",
    "Values": [{
      "Id": 100,
      "LanId": 1,
      "KeyId": 59,
      "Value": "Save"
    }]
  }]
  $scope.cols = Object.keys($scope.data[0]);
  $scope.notSorted = function(obj) {
    if (!obj) {
      return [];
    }
    return Object.keys(obj);
  }
});

index.html

<table border=1 style="margin-top: 0px !important;">
  <thead>
    <tr>
      <th ng-repeat="(k,v) in data[0]">{{k}}</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="item in data">
      <td ng-repeat="(prop, value) in item" ng-init="isArr = isArray(value)">
        <table ng-if="isArr" border=1>
          <thead>
            <tr>
              <td>
                <button ng-click="expanded = !expanded" expand>
                  <span ng-bind="expanded ? '-' : '+'"></span>
                </button>
              </td>
            </tr>
            <tr>
              <th ng-repeat="(sh, sv) in value[0]">{{sh}}</th>
            </tr>
          </thead>
          <tbody>
            <tr ng-repeat="sub in value" ng-show="expanded">
              <td ng-repeat="(sk, sv) in sub">{{sv}}</td>
            </tr>
          </tbody>
        </table>
        <span ng-if="!isArr">{{value}}</span>
      </td>
    </tr>
  </tbody>
</table>

{{k}
{{sh}
{{sv}}
{{value}}

因此数组中的每个元素的

id

都为空，然后执行以下操作

{{k}

及

---

plnkr:

您可以使用以下选项筛选出只有

null

值的列：

JavaScript

$scope.cols = Object.keys($scope.data[0]).filter(function(col) {
    return $scope.data.some(function(item) {
      return item[col] !== null;
    });
});

并在模板中签入是否应呈现此列：

HTML

<table border=1 style="margin-top: 0px !important;">
    <thead>
        <tr>
            <!-- Iterate over non-null columns -->
            <th ng-repeat="col in cols">{{col}}</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="item in data">
            <!-- Use ngIf to hide redundant column -->
            <td ng-if="cols.indexOf(prop)>=0" ng-repeat="(prop, value) in item" ng-init="isArr = isArray(value)" >
...

{{col}}
...

Plunker

---

您需要使用在

$scope

中定义的

cols

属性，但还需要确保其正确且响应迅速。你是这样做的：

var colsFromData = function(data) {
  var activeCols = {};
  data.forEach(function(o) {
    Object.keys(o).forEach(function(k) {
      if(null == o[k])
        return;
      activeCols[k] = 1; 
    })
  });
  return Object.keys(activeCols);
}

$scope.cols = colsFromData($scope.data);

$scope.$watchCollection('data', colsFromData);

然后在模板中，要使用现在正确的

cols

数组：

...
    <thead>
      <tr>
        <th ng-repeat="k in cols">{{k}}</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="item in data">
        <td ng-repeat="(prop, value) in item" ng-init="isArr = isArray(value)" ng-if="cols.indexOf(prop) >= 0">
...

。。。
{{k}
...

---

更新后的

这是您之前提出的问题的完整副本，甚至没有尝试合并已提供的解决方案。这是一个列调整问题，是一个动态生成的列。此问题的代码与前一个问题中使用的代码完全相同，但是一个静态代码，用于了解如何隐藏列使用简单的angularjs

ng if

和提供的解决方案正好满足您在本问题中的要求是的解决方案使用的是与调整列相关的指令，但这里我希望使用angularjs ng if条件的简单解决方案，这在大多数情况下都使用，并且对其他人有用，谢谢您以前的解决方案如果存在任何一个id值，则输出会出错@Neo yes，但您的问题是

如果**all**json值为null，如何隐藏表列