Comment réparer les positions des éléments de table js angulaires

Je binding json data à ng-table utilisant angular js

Si une valeur est nulle, les positions pour toutes les colonnes sont perturbées. Quelqu'un peut-il m'aider à réparer les données avec l'en-tête de la colonne?

Voir ce plunker http://plnkr.co/edit/Ixvp8B0dRwOBDHflmu2j?p=preview

Description doit être null mais toutes les valeurs sont déplacées vers la gauche.

 Or If all values are null for any property hide that particular column

Pour déterminer si une colonne est vide, vous avez besoin d'une sorte de configuration de colonne créée en itérant les données pour voir si toutes les lignes contiennent des données pour l'une des rubriques (clés d'objet).

Ensuite, vous pouvez utiliser ce réseau de configuration de colonnes comme répéteur pour <th> et <td> .

Exemple de configuration:

 [ { "heading": "Id", "display": true }, { "heading": "Title", "display": true }, { "heading": "Description", "display": true }, { "heading": "Test", "display": false } ]

HTML

 <thead> <tr> <th ng-repeat="col in colConfig" ng-if="col.display">{{col.heading}}</th> </tr> </thead> <tbody> <tr ng-repeat="item in data"> <td ng-repeat="col in colConfig" ng-if="col.display"> {{item[col.heading]}} </td> </tr> </tbody>

Exemple config create

  var keys = Object.keys(data[0]); function createConfig() { var validKeyCounts = {}; var colConfig; keys.forEach(function (key) { validKeyCounts[key] = 0; }) data.forEach(function (row, idx) { keys.forEach(function (key) { if (row.hasOwnProperty(key) && row[key] !== null) { validKeyCounts[key]++; } }) }); colConfig = keys.map(function (key) { return { heading: key, display: validKeyCounts[key] > 0 } }); return colConfig }

Je suis sûr que cela pourrait être optimisé, mais c'est juste une façon de commencer avec la fonctionnalité recherchée

DEMO