CODEWITHSUNDEEP
angularjsangularjs-ng-repeat
naivecoder
naivecoder

Reputation: 9

How can data be filtered in a html table with filter in each column separately using Angular JS?

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>

Upvotes: 0

Views: 1434

Answers (2)

Sachila Ranawaka
Sachila Ranawaka

Reputation: 41377

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>

Upvotes: 1

Fabio Picheli
Fabio Picheli

Reputation: 959

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

Upvotes: 0

Related Questions