Geek Answers Handbook

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

Plunger example

How to hide table column if all json value is null for any property using angular 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>
+5
source share
3 answers

You can filter columns that have only null values ​​with:

Javascript

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

and check the template if this column should be displayed:

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

+2
source

So id is zero for every element in the array, then do

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

and

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

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

+1
source

You need to use the cols property that you defined in your $scope , but you also need to make sure that it is correct and responsive. You do it like this:

 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);

Then in your template now use the correct cols array:

 ... <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"> ...

And updated plunker

+1
source

More articles:


All Articles