AngularJs用下拉筛选器搜索

Question

你会如何去创建一个精致的搜索？使用下面的代码，过滤器将作用于两列。例如，如果您输入John，您将同时得到John Smith & Smith John。我想使用下拉菜单作为过滤器。我看了其他提到过滤器的帖子：object.value或其他东西。

我想我需要将下拉菜单设置为一个值，然后将其输入到文本框并过滤到表格中。

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

我增加了一个NG-变化到过滤器下拉，并设置在过滤器对象上的函数调用。

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

这里是工作示例http://codepen.io/mkl/pen/GqpxGZ