dynamic Columns based on filter in angularjs

Question

I have a requirement where I have X number of columns. These columns are rendered using ng-repeat TH and TD. What I want to do is, to filter the columns**(not rows)**

EX: TypeX and TypeY are my filters in a select option and each column belongs to a Type.

Colum1 TypeX | Column2 TypeY | Column3 TypeX

data1 | data2 | data3

If I filter the above table with TypeX, I just want to see Column1 and Column3

Questions - Is this even possible?

I need this based on some requirements I received where each column has a different type

Really appreciate your help!

Thank You, Nilesh

If it helps, here is code (which does not work as expected). EDIT - This is a sample code I created using the code snippet tool

var app = angular.module("test", []);
app.controller("myTest", function($scope) {
  //$scope.tableData = ['data', 'data', 'data', 'data', 'data', 'data'];
  $scope.tableData = ['data1', 'data2', 'data3', 'data4', 'data5', 'data6'];
  $scope.tableColumns = ['Column1', 'Column2', 'Column3', 'Column4', 'Column5', 'Column6'];
  $scope.typesList = ['TypeX', 'TypeX', 'TypeY', 'TypeY', 'TypeX', 'TypeY'];
  $scope.types = ["TypeX", "TypeY"];
});

//

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html ng-app="test">
<div ng-controller="myTest">
  <div>
    <div>
      <span>Filter Type:</span> 
      <select ng-model="testFilter">
        <option value="">--type--</option>
        <option ng-repeat="t in types" value="{{t}}">{{t}}</option>
      </select>
    </div>
    <table border="1">
      <tr>
        <th ng-repeat="c in tableColumns | filter:testFilter">{{c + " " + typesList[($index + 1) - 1]}}</th>
      </tr>
      <tr>
        <td ng-repeat="d in tableData  | filter:testFilter">{{d + " " + typesList[($index + 1) - 1]}}</td>
      </tr>
    </table>
  </div>
</div>

</html>

ah! You want to filter columns not rows... This is an interesting challenge!! A potential problem is the structural changes you must perform in the table. Does it need to be a <table>? Or can you use divs (simulating a table)? — Tivie
– Tivie, Commented Nov 24, 2014 at 8:32
I could use divs but it is a big challenge for me cause I am really not a CSS guy, and I will have to changes somethings that someone else wrote. If it would be possible with a table, it will be great. — Nilesh
– Nilesh, Commented Nov 24, 2014 at 8:34

Marian Ban · Accepted Answer · 2014-11-24 09:33:53Z

1

you can use ng-if instead of filter:

    <div>
      <div>
        <span>Filter Type:</span>
        <select ng-model="testFilter">
          <option value="">--type--</option>
          <option ng-repeat="t in types" value="{{t}}">{{t}}</option>
        </select>
      </div>
      <table border="1">
        <tbody>
          <tr>
            <th ng-repeat="c in tableColumns" ng-if="!testFilter || typesList[$index] == testFilter">{{c + " " + typesList[($index + 1) - 1]}}</th>
          </tr>
          <tr>
            <td ng-repeat="d in tableData" ng-if="!testFilter || typesList[$index] == testFilter">{{d + " " + typesList[($index + 1) - 1]}}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </body>

http://plnkr.co/edit/vNjJJAY6P2fpNDCi2FAO?p=preview

answered Nov 24, 2014 at 9:33

Marian Ban

8,1881 gold badge35 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

dynamic Columns based on filter in angularjs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related