0

I want to use some text box in a dropdown or so beside each column header for text input for searching in that particular column as in for ID or Name.

 <div>
  <table class="table">
   <tbody>
    <tr>
     <th>ID</th>
     <th>Name</th>
    </tr>
    <tr ng-repeat="item in data">
     <td>{{item.id}}</td>
     <td>{{item.name}}</td>

    </tr>
   </tbody>
  </table>
 </div>
Cœur
  • 37,241
  • 25
  • 195
  • 267
naivecoder
  • 9
  • 4

2 Answers2

1

use filter like this 

<table class="table">
    <tbody>
        <tr>
            <th>ID</th>
            <th>Name</th>
        </tr>
        <tr>
            <th>
    <select ng-model="selectVal" > 
      <option value="id"> id</option>
      <option value="name"> name</option>
    </select>
  </th>
            <th><input ng-model="search[selectVal]" /></th>
        </tr>
        <tr ng-repeat="item in data | filter : search">
            <td>{{item.id}}</td>
            <td>{{item.name}}</td>

        </tr>
    </tbody>
</table>


angular.module("app",[])
.controller("ctrl",function($scope){
 $scope.data = [{id:1,name:'sss'},{id:2,name:'aaa'}];
})

 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
  <div>
  <table class="table">
   <tbody>
    <tr>
     <th>ID</th>
     <th>Name</th>
    </tr>
    <tr>
     <th>
            <select ng-model="selectVal" > 
              <option value="id"> id</option>
              <option value="name"> name</option>
            </select>
          </th>
     <th><input ng-model="search[selectVal]" /></th>
    </tr>
    <tr ng-repeat="item in data | filter : search">
     <td>{{item.id}}</td>
     <td>{{item.name}}</td>

    </tr>
   </tbody>
  </table>
 </div>
  
  
</div>
Sachila Ranawaka
  • 39,756
  • 7
  • 56
  • 80
  • Thanks! I was thinking of enhancing this functionality by adding a filter button or drop down beside every column header which would list all the possible values(which I would have to get from backend) for that column with checkboxes beside every value so that I could select a few/all of them and then filter records by pressing a submit button. e.g. name has 4 column values which are abc, xyz, mno, abc then the checkboxes should appear for abc, xyz and mno. Selecting abc using checkbox and filtering should give me two records with abc value. Can you give me a brief for the controller required? – naivecoder Mar 07 '17 at 20:26
0

It's simple, you just have to add a input for each column, like this:

<table class="table">
  <tbody>
    <tr>
      <th>
        <p>ID</p>
        <input ng-model="search.id" />
      </th>
      <th>
        <p>Name</p>
        <input ng-model="search.name" />
      </th>
    </tr>
    <tr ng-repeat="item in data | filter:search">
      <td>{{item.id}}</td>
      <td>{{item.name}}</td>

    </tr>
  </tbody>
</table>

Take a look in this example and this answer

Community
  • 1
  • 1
Fabio Picheli
  • 939
  • 11
  • 27
  • Thanks! I was thinking of enhancing this functionality by adding a filter button or drop down beside every column header which would list all the possible values(which I would have to get from backend) for that column with checkboxes beside every value so that I could select a few/all of them and then filter records by pressing a submit button. e.g. name has 4 column values which are abc, xyz, mno, abc then the checkboxes should appear for abc, xyz and mno. Selecting abc using checkbox and filtering should give me two records with abc value. Can you give me a brief for the controller required? – naivecoder Mar 07 '17 at 20:25
  • Have you seen the [ng-table](http://ng-table.com/#/)? I think will help you alot with this filters, paginations, etc... – Fabio Picheli Mar 07 '17 at 20:27