AngularJs Search with drop down filter

Question

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.

HTML

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

    <table>
        <thead>
            <tr>
                <th>First Name</th>
                <th>Last Name</th>
            </tr>
        </thead>
        <tbody>


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



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

                <td>{{name.firstName}}</td>
                <td>{{name.lastName}}</td>
            </tr>
        </tbody>
    </table>
</div>

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

.JS

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

 $scope.names = [
         {"firstName":"John","lastName":"Smith"},
        {"firstName":"Smith","lastName":"John"},
        {"firstName":"John","lastName":"Doe"},
        {"firstName":"Doe","lastName":"Jane"}
      ];



 });

Similar to this, but I want to be able to be able to change ng-model="search.color to "searchData.(firstName or lastName)" depending on the dropdown. stackoverflow.com/questions/14733136/… — cbean14
– cbean14, Commented Jun 7, 2016 at 19:50

Michael · Accepted Answer · 2016-06-08 14:04:54Z

3

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 http://codepen.io/mkl/pen/GqpxGZ

edited Jun 8, 2016 at 14:04

answered Jun 7, 2016 at 20:14

Michael

6536 silver badges19 bronze badges

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

5 Comments

cbean14 Over a year ago

Just what I needed to see. Thanks! I'm guessing that there would be an easy way to change the filter by option to search both columns? So you could search all, search by first and search by last

Michael Over a year ago

You could add a new option for Both or if neither is selected just set $scope.filterData = $scope.searchData. I updated my example to show how to add the option.

cbean14 Over a year ago

Michael - It seems that by using ng-change, the filter is no longer immediate or dynamic. You are required to type in the text box and then change the dropdown value before results are returned. Is there a way to make this work with ng-change?

Michael Over a year ago

Add an ng-change to the input making the same call as the drop down. I update the codepen.

CyberNinja Over a year ago

great...i miss that ng-change too in the input..no wonder it's not changin..overall great solution..thanks

Collectives™ on Stack Overflow

AngularJs Search with drop down filter

1 Answer 1

5 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Linked

Related