Snoopy14 Snoopy14 - 7 months ago 81
AngularJS Question

AngularJs Search with drop down filter

How would you go about creating a refined search? With the code below, the filter acts on both of the columns. For example, if you type in John, you will get both John Smith & Smith John. I want to use a dropdown as a filter by. I looked at other posts which mentioned filter: object.value or something.

I think I need to set the dropdown to a value which is then fed to the text box and filtered to the table.


<div ng-app="searchApp" ng-controller="searchCtrl">
<input type="text" ng-model="searchData">

<th>First Name</th>
<th>Last Name</th>

<option value="">FilterBy</option>
<option value="">FirstName</option>
<option value="">LastName</option>

<tr ng-repeat="name in names | filter:searchData">


<script src=" search.js " type="text/javascript "></script>


var searchApp = angular.module('searchApp', []);
searchApp.controller('searchCtrl', function($scope) {

$scope.names = [



I added an ng-change to the filter drop down and set the filter object on that function call.
<select ng-model="by" ng-change="filter(by)"> <option value="">FilterBy</option> <option value="firstName">FirstName</option> <option value="lastName">LastName</option> </select>

$scope.filter = function(by){ if(by){ $scope.filterData = { }; $scope.filterData[by] = $scope.searchData;
}else{ $scope.filterData = {}; } };

Here is a link to a working example