2015-07-19 12 views
5

Plunker sampleCome nascondere colonna tabella se ogni valore json è nullo per qualsiasi struttura utilizzando js angolari

Come nascondere colonna tabella se ogni valore json è nullo per qualsiasi proprietà utilizzando js angolari

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> 
+1

questo è un duplicato completo della domanda che hai posto prima e non tenta nemmeno di incorporare la soluzione fornita già http: // StackOverflow.it/questions/31499247/how-to-fix-the-positions-of-table-elements-angular-js – charlietfl

+0

no che era un problema di regolazione della colonna che è una colonna generata dinamicamente questa domanda ha lo stesso codice identico che è usato in precedenti domanda ma un codice statico per sapere come nascondere una colonna usando il semplice angularjs 'ng-if' – Neo

+0

e la soluzione fornita ha fatto proprio quello che stai chiedendo in questa domanda – charlietfl

risposta

2

è possibile filtrare le colonne che hanno solo null val UES con:

JavaScript

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

e il check-in modello se questa colonna dovrebbe essere resa:

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

+0

perfetto grazie mille :) – Neo

1

Così il id è nullo per ogni elemento della matrice, poi fare

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

e

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

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

+0

se è presente un valore id qualsiasi, l'output viene errato http: // plnkr .co/edit/Z2R0CNuHDyCQ9GEBwEpV? p = anteprima – Neo

+1

@Neo sì, ma la tua domanda era 'Come nascondere la colonna della tabella se ** tutto ** il valore di json è nullo' –

+0

nessun problema grazie mille – Neo

1

Hai bisogno di fare uso della proprietà cols definito nel tuo $scope, ma è anche necessario assicurarsi che il suo corretto e reattivo. Fate che in questo modo:

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

Poi nel modello, per usare l'ormai corretta cols matrice:

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

E l'aggiornamento plunker

Problemi correlati