AngularJs Suche mit Dropdown-Filter

Question

Wie würden Sie eine verfeinerte Suche erstellen? Mit dem folgenden Code wirkt der Filter auf beide Spalten. Wenn Sie beispielsweise John eingeben, erhalten Sie beide John Smith & Smith John. Ich möchte ein Dropdown-Filter als Filter verwenden. Ich schaute auf andere Beiträge, die filter: object.value oder so etwas erwähnt.

Ich denke, ich muss das Dropdown auf einen Wert festlegen, der dann in das Textfeld eingegeben und in die Tabelle gefiltert wird.

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



}); 

Answer 1

I hinzugefügt, um das Filter eine ng Änderungs Dropdown und an diesem Funktionsaufruf das Filterobjekt gesetzt.

<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 = {}; 
    } 
}; 

Hier ist ein Link zu einem Arbeitsbeispiel http://codepen.io/mkl/pen/GqpxGZ