Question

所以我有一个搜索框，其中包含一些我希望限制搜索的参数。这包括我的示例中的名字和姓氏。

What I'm trying to achieve

所以我一直在努力实现这一点。这是下拉列表的代码。

<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-repeat中使用：

<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

您不需要添加3个文本框。如果您将监视表达式放在两个控件的模型上（搜索和选择），则可以执行此操作。所有需要做的就是根据一个变量进行过滤，你可以动态地将值赋给（在watch表达式中）。例如，如果你想在first_Name的基础上进行搜索，我们设置myModel.first_Name = searchText＆amp;类似于last_Name。如果未在下拉列表中选择任何内容，我们设置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;
   });

＆＃39; searchText＆＃39;同样需要做。

请参阅此plnkr以获取完整代码＆amp;给它一个试运行： - http://plnkr.co/edit/q9Co9stjzXI62UlWczU3?p=preview

Answer 3

我想你可能正在用这么多的搜索文本来处理这个问题。但我只是想用一个方法来演示如何做到这一点，但在参数数量超出带宽的情况下，我的想法可能会失控

基本上我所做的是设置需要应用过滤器的状态

当查询文本发生更改时，您需要使用AND条件

应用复合条件的过滤器

复选框的基本设置如下所示

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

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

Angular JS：使用select定义的参数进行搜索

3 个答案: