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