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

Question

Plunker sample

How to hide table column if all json value is null for any property using angular js

索引.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>

Answer 1

您可以过滤掉只有 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)" >
...

笨蛋

http://plnkr.co/edit/PIbfvX6xvX5eUhYtRBWS?p=preview