Arun Nandha Arun Nandha - 1 year ago 153
AngularJS Question

AngularJS Filter table based on radio button combine with textbox

I'm new to angularjs here i want to achieve when i click one radio button the textbox should filter the table by specific column. when i click another radiobutton the textbox should filter the table by another column.For Example when i click "sficode" radiobtn the textbox filter the table based on sficode column and when i click Title/description it should filter according to that column "Desc".

<div style="width:250px;margin-left: 9px;">
<fieldset class="form-group">
<legend style="color: #424248;margin-bottom: 0px;">Search</legend>
<input type="radio" name="Search" id="rdoSfiCode" value="SfiCode" ng-model="filters.x">
<label for="rdoSfiCode">SfiCode</label>
<input type="radio" style="margin-left:5px;" name="Search" id="rdoTitleDisc" value="TitleDisc" ng-model="filters.y">
<label for="rdoTitleDisc">Tile/Discription</label><br>
<input type="text" style=" width: 200px;height: 25px;" id="txtSfiorDisc" ng-model="search" />
<tr ng-repeat="corrItem in CorrItems">
<td >{{corrItem.SfiCode}}</td>

here is my json data:

$scope.CorrItems=[{"SFICode":"803.025.01","Desc":"Repair coupling of the discharge pump of the Bilge Water Separator"},{"SFICode":"823.125.01","Desc":"pump of the Bilge Water Separator"},]

Thanks in advance..

Answer Source

This should help you:

 <input type="radio" name="filter" value="SFICode" ng-model="filter" ng-change="clearFilter()">
 <label for="rdoSfiCode">SfiCode</label>

 <input type="radio" name="filter" value="Desc" ng-model="filter" ng-change="clearFilter()">
 <label for="rdoTitleDisc">Tile/Discription</label>

 <input type="text" ng-model="search[filter]" />

  <tr ng-repeat="(key,value) in data | filter:search">

And your angular code:

var app = angular.module("myapp", []);
app.controller("main", function($scope) {
  $ = [{
    SFICode: "803.025.01",
    Desc: "Repair coupling of the discharge pump of the Bilge Water Separator"
  }, {
    SFICode: "823.125.01",
    Desc: "pump of the Bilge Water Separator"

  $scope.clearFilter = function() {
    $ = {};

Some general advice, be consistent with capital letters and collect your style attributes in a css file!

Arrays in Angular shouldn't start with a capital letter (CorrItems -> corrItems), neither should object properties (SFICode -> sfiCode) etc.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download