1

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"}
      ];



 });
cbean14
  • 111
  • 2
  • 8
  • 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. http://stackoverflow.com/questions/14733136/ng-repeat-filter-by-single-field – cbean14 Jun 07 '16 at 19:50

1 Answers1

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

Michael
  • 653
  • 6
  • 19
  • 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 – cbean14 Jun 07 '16 at 20:24
  • 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. – Michael Jun 07 '16 at 20:27
  • 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? – cbean14 Jun 08 '16 at 18:55
  • Add an ng-change to the input making the same call as the drop down. I update the codepen. – Michael Jun 08 '16 at 19:00
  • great...i miss that ng-change too in the input..no wonder it's not changin..overall great solution..thanks – CyberNinja May 01 '17 at 18:11