angularjsテーブルの列を非表示にする/表示する

Question

表示/非表示の列オプションを使用してdynamic（api）ng-tableを設定しようとしています。
自分のデータをfirebaseデータベースから取得します。
現在、データはテーブルにスローされますが、テーブルの列ヘッダーはsortableではなく、各列のfilterableではありません。
もう1つの問題は、チェックボックスがチェックされているときにthe show/hideが機能せず、すべての列を表示しているため、表示/非表示のチェックボックスがテーブルの列に正しくバインドされていないことです。ここで

は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> 

、ここでは、コントローラである：ここでは

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

は、私は、角度で私のテーブルをソートするために使用する簡単なトリックです。

https://jsfiddle.net（私は、テーブルのヘッダー

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

にこれらを追加しますと、私はあなたが[フィドル]を作成することができますng-repeat

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