Angular JS：使用參數

Question

定義的參數進行搜索所以我有一個搜索框，其中有一些參數，我想限制搜索範圍。這包括我的例子中的名字和姓氏。

所以我一直在努力實現這個像這樣。這是下拉列表的代碼。

<select id="usersearchby" ng-model="searchFilter" ng-change="selectAction()"> 
     <option>Search By ...</option> 
     <option value="lastName">Last Name</option> 
     <option value="firstName">First Name</option> 
</select> 

這是輸入搜索字段的代碼。

<input type="search" ng-if="searchFilter != 'firstName' && searchFilter != 'lastName'" ng-model="searchText"> 
<input type="search" ng-if="searchFilter == 'firstName'" ngModel="searchText.first_name"> 
<input type="search" ng-if="searchFilter == 'lastName'" ngModel="searchText.last_name"> 

這是顯示結果的div的代碼。

<div class="block_line_item userlist_expanded" ng-repeat="user in users | filter: searchText"> 

此代碼不工作，但是，如果我只是有說FIRST_NAME（沒有條件輸入）單個輸入搜索框，它工作得很好！我究竟做錯了什麼？有沒有更好的方法來做到這一點？

JSON數據我工作的一個示例：

[{"role":"1","credentials":"","work_phone":"206–298–3059","last_name":"Doe","middle_name":"","suffix":"","title":"Mr.","mobile_phone":"1–877–932–4259","id":1,"fax":"135–678-6357","first_name":"John","email":"user1@gmail.com","username":"user1"},  {"role":"1","credentials":"","work_phone":"206–298–3059","last_name":"Doe","middle_name":"","suffix":"","title":"Mr.","mobile_phone":"1–877–932–4259","id":2,"fax":"135–678–6357","first_name":"Jane","email":"user22@gmail.com","username":"user2"}] 

Answer 1

而是有三個文本框是更好的做法是有一個，在你的控制器將通過過濾器的NG-重複使用使用過濾器功能：

<input type="search" ng-model="searchText"/> 

<div class="block_line_item userlist_expanded" ng-repeat="user in users | filter: filterUsers(searchText, searchFilter)"> 
     {{user.first_name + ' ' + user.last_name}} 
</div> 

$scope.filterUsers = function(searchText, searchFilter) { 
    if (searchFilter === 'firstName') { 
     return function (user) { return user.first_name.match(searchText); } 
    } 
    else if (searchFilter === 'lastName') { 
     return function (user) { return user.last_name.match(searchText); } 
    } 
    else { 
     return function (user) { return user.first_name.match(searchText) || user.last_name.match(searchText); } 
    } 
}; 

http://plnkr.co/edit/vYlBLiF555JLpwlnZIPR?p=preview

Answer 2

我想可能是你與一個以上的搜索文本來處理這樣艱辛的道路。但我只是把一個plunkr演示一種方式來做到這一點，但我的想法可能會失控的情況下，參數的數量帶寬超出

基本上我所做的是設置哪些過濾器需要的狀態應用

當查詢文本更改時，需要使用AND條件申請複利條件的過濾器

複選框的基本設置進入下面

$scope.shouldSearchWithFName = false; 
    $scope.shouldSearchWithLName = false; 
    $scope.searchText = ""; 

Plunkr http://plnkr.co/edit/nFV9s4XDrXGcmUYUPm8n?p=preview

Answer 3

您不需要添加3個文本框。如果您在兩個控件的模型上放置手錶表達式（搜索&選擇），則可以完成此操作。 所有需要做的事情都是基於一個變量來過濾，您可以動態分配值（在監視表達式中）。 例如，如果您想在first_Name的基礎上進行搜索，我們對last_Name設置類似的myModel.first_Name = searchText &。在下拉菜單中不選擇任何東西的情況下，我們設置 'SEARCHTEXT' 做基於myModel = SEARCHTEXT

HTML

 <select id="usersearchby" ng-model="searchFilter"> 
     <option>Search By ...</option> 
     <option value="last_Name">Last Name</option> 
     <option value="first_Name">First Name</option> 
    </select> 
    <input type="search" ng-Model="searchText"> 
    <br> 

    <div> 
    <br> 
     All Data :- <br> 
      {{ jsonStore }} 
    </div> 
    <br> 

    Result:- 
    <div ng-repeat="user in jsonStore | filter:filterModel"> 
     {{user}} 
    </div> 

JS

$scope.$watch('searchFilter', function(newValue) { 
var myModel={ 
     first_Name: "", 
     last_Name: "", 
     }; 
if(angular.equals(newValue,'first_Name')) 
    { 
     myModel.first_Name=$scope.searchText; 
    } 
else if(angular.equals(newValue,'last_Name')) 
    { 
     myModel.last_Name=$scope.searchText; 
    } 
    else 
    { 
    myModel=$scope.searchText; 
    } 
    $scope.filterModel=myModel; 
    }); 

同樣的需求。

請參閱本plnkr給了它一個試運行的完整代碼&： - http://plnkr.co/edit/q9Co9stjzXI62UlWczU3?p=preview