CODEWITHSUNDEEP
angularjsangularjs-directiveangularjs-ng-repeat
Apostrofix
Apostrofix

Reputation: 2180

How to use ng-repeat and filter to hide some columns in a dynamic table?

I have a dynamic data set returned from a database for which I am trying to create a generic table that can always list it, no matter the number of columns or rows.

It works fine but the problem I am having is that I want to be able to hide some columns, like the ID for example.

This is how the data looks like:

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',
    }
];

And this is HTML for the table generation:

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

I tried adding a filter on the <td> but I am not sure how to filter based on the scope.columns array.

Upvotes: 2

Views: 2605

Answers (1)

lin
lin

Reputation: 18402

You could do it with ng-if -> ng-if="columns[$index].Visible" in your case like in this DEMO FIDDLE. Your attribute order in $scope.rows must be the same as in $scope.columns to ensure it is working correct.

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

Upvotes: 2

Related Questions