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

Posted 2023-03-06

【中文标题】如果使用角度js的任何属性的所有json值为null，如何隐藏表列

【英文标题】：How to hide table column if all json value is null for any property using angular js

【发布时间】：2015-10-08 18:26:45

【问题描述】：

Plunker sample

如果任何属性的所有 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>

【问题讨论】：

这是您之前提出的问题的完整副本，甚至没有尝试合并已经提供的解决方案 ***.com/questions/31499247/…

不，这是一个列调整问题，它是一个动态生成的列这个问题的代码与上一个问题中使用的代码完全相同，但是一个静态代码知道如何使用简单的 angularjs ng-if 隐藏列

所提供的解决方案正是您在这个问题中提出的问题

yes 解决方案是使用与调整列相关的指令，但在这里我希望有一个使用 angularjs ng-if 条件的简单解决方案，它在大多数情况下使用，顺便说一句对其他人有用，谢谢你以前完美的解决方案

【参考方案1】：

您需要使用您在$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">
...

还有更新后的plunker

【参考方案2】：

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

Plunker

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

【参考方案3】：

所以id对于数组中的每个元素都是空的，然后做

<th ng-repeat="(k,v) in data[0]" ng-show="v">k</th>

和

<td ng-repeat="(prop, value) in item" ng-init="isArr = isArray(value)" ng-show="value">

plnkr：http://plnkr.co/edit/rra778?p=preview

【讨论】：

如果任何一个 id 值存在则输出错误plnkr.co/edit/Z2R0CNuHDyCQ9GEBwEpV?p=preview

@Neo 是的，但你的问题是How to hide table column if **all** json value is null