Colonnes de la table angularjs pour masquer/afficher la liaison

Question

J'essaie de configurer une table ng-dynamic (api) avec les options afficher/masquer les colonnes.
Mes données sont extraites de la base de données Firebase.
Actuellement, les données sont jetées dans la table, mais les en-têtes de colonne de table ne sont pas sortable et pas filterable sur chaque colonne.
Et l'autre problème est que les cases à cocher afficher/masquer ne sont pas correctement liées aux colonnes de la table, car lorsqu'une case à cocher est (dé) cochée, the show/hide ne fonctionne pas et affiche toujours toutes les colonnes.

Voici le code html:

<div ng-controller="mycontroller"> 
<div class="checkbox-inline"> 
    <label ng-repeat="col in cols"> 
     <input type="checkbox" ng-model-options="{ getterSetter: true }" 
     ng-model="col"/> {{col}} 
    </label> 
</div> 
    <table ng-table-dynamic="tableParams with cols" 
      show-filter="true" class="table table-bordered table-striped"> 
     <thead> 
      <tr> 
       <th ng-if="true" ng-repeat="col in cols">{{col}}</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr ng-repeat="row in $data"> 
       <td ng-repeat="col in cols">{{row[col]}}</td> 
      </tr> 
     </tbody> 
    </table> 
</div> 

et est ici le contrôleur:

app.controller('ngTableCtrl33', ["$scope", "$filter", "ngTableParams", "DatabaseRef", "$firebaseArray", 
    function ($scope, $filter, ngTableParams, DatabaseRef, $firebaseArray) { 
     var showallprojects = DatabaseRef.ref("projects").orderByKey(); 
     $scope.allprojectslist = $firebaseArray(showallprojects); 
     var data = $scope.allprojectslist; 
     data.$loaded().then(function(data) { 
      console.log(data.length); // data is loaded here 
      $scope.cols = Object.keys(data[0]); 
      console.log($scope.cols); 
      $scope.tableParams = new ngTableParams({ 
       page: 1, // show first page 
       count: 7, // count per page 
       sorting: { country: "asc" }, 
       filter : { 
       } 
      }, { 
       filterSwitch: true, 
       total: 0, //data.length, // length of data 
       getData: function ($defer, params) { 
        // use build-in angular filter 
        var filteredData = params.filter() ? 
         $filter('filter')($scope.allprojectslist, params.filter()) : 
         $scope.allprojectslist; 
         var orderedData = params.sorting() ? 
         $filter('orderBy')(filteredData, params.orderBy()) : 
         $scope.allprojectslist; 

        params.total($scope.allprojectslist.length); 
        // set total for recalc pagination 
        $defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count())); 
        } 
      }); 
     }); 
    }]); 

Answer 1

Voici une astuce simple j'utiliser pour trier ma table angulaire.

Je vais ajouter à l'en-tête de table

<th ng-click="sortKey=col;order=!order;" style="cursor:pointer"> {{col}}</th> 

et je vais ajouter ces params sur ng-repeat

<tr ng-repeat="row in $data | orderBy:sortKey:order">