AngularJs用下拉篩選器搜索

你會如何去創建一個精緻的搜索？使用下面的代碼，過濾器將作用於兩列。例如，如果您輸入John，您將同時得到John Smith & Smith John。我想使用下拉菜單作爲過濾器。我看了其他提到過濾器的帖子：object.value或其他東西。AngularJs用下拉篩選器搜索

我想我需要將下拉菜單設置爲一個值，然後將其輸入到文本框並過濾到表格中。

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



});

來源

2016-06-07 cbean14

這種類似的鏈接，但我希望能夠能夠改變NG-模型=「search.color爲」 searchData。（名字或lastName的）「取決於下拉列表。http://stackoverflow.com/questions/14733136/ng-repeat-filter-by-single-field – cbean14

我增加了一個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

來源

2016-06-07 20:14:51 Michael

正是我需要看到的。謝謝！我猜測會有一個簡單的通過選項來更改過濾器來搜索兩個列嗎？所以你可以搜索所有，首先搜索，最後搜索 – cbean14

你可以爲Both添加一個新選項，或者如果沒有選擇，只需設置$ scope.filterData = $ scope.searchData 。我更新了我的例子以說明如何o添加選項。 – Michael

邁克爾 - 似乎通過使用ng-change，過濾器不再是直接或動態的。您需要輸入文本框，然後在返回結果之前更改下拉值。有沒有辦法使這個工作與ng-change？ – cbean14

AngularJs用下拉篩選器搜索

回答

相關問題