ダイナミックテーブルの一部の列を非表示にするにはng-repeatとfilterを使用する方法は？

Question

列または行の数に関係なく、常にリストすることができる汎用テーブルを作成しようとしているデータベースから動的データセットが返されました。

これはうまくいきますが、私が抱えている問題はIDなどのいくつかの列を非表示にしたいということです。

scope.columns = [ 
    { 
     'Name': 'ID', 
     Visible: false, 
    }, 
    { 
     'Name': 'Name', 
     Visible: true, 
    }, 
    { 
     'Name': 'Description', 
     Visible: true, 
    }, 
]; 

scope.rows = [ 
    { 
     ID: 1, // should be hidden because ID column above is set to Visible - false 
     Name: 'Test', 
     Description: 'Its a test', 
    }, 
    { 
     ID: 2, // should be hidden because ID column above is set to Visible - false 
     Name: 'Test 2', 
     Description: 'Its a test 2', 
    } 
]; 

そして、これは、table世代のためHTMLです：

<table class="table"> 
    <!-- This part works fine and doesn't show some of the columns --> 
    <tr> 
     <th ng-repeat="column in columns | filter: { Visible: 'true'}"> 
      <span ng-bind="column.Name"></span> 
     </th> 
    </tr> 
    <tr ng-repeat="row in rows"> 
     <td ng-repeat="col in row"> <!-- This is the part where I need filter the cols based on the column.Visible above --> 
      {{col}} 
     </td> 
    </tr> 
</table> 

私は<td>にフィルタを追加してみましたが、私はどのように確認していないデータがどのように見えるか

ですscope.columns配列に基づくフィルタこのDEMO FIDDLEのように、あなたのケースで>ng-if="columns[$index].Visible" -

Answer 1

あなたはng-ifでそれを行うことができます。 $scope.rowsの属性オーダーは、正しく動作するように、$scope.columnsと同じでなければなりません。

<div ng-controller="MyCtrl"> 
    <table class="table"> 
    <!-- This part works fine and doesn't show some of the columns --> 
    <tr> 
     <th ng-repeat="column in columns | filter: { Visible: true}"> 
     <span ng-bind="column.Name"></span> 
     </th> 
    </tr> 
    <tr ng-repeat="row in rows"> 
     <td ng-repeat="col in row" ng-if="columns[$index].Visible"> 
     {{col}} 
     </td> 
    </tr> 
    </table> 
</div>