1

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

我想要达到的目标

所以我一直在尝试这样实现。这是下拉列表的代码。

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

3 回答 3

2

与其拥有三个文本框，不如拥有一个并在控制器中使用过滤器功能，该功能将由 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

于 2014-12-08T09:32:11.403 回答
2

您不需要添加 3 个文本框。如果您在两个控件（搜索和选择）的模型上放置一个监视表达式，则可以完成。所需要做的就是根据您将动态分配值的变量进行过滤（在监视表达式中）。例如，如果您想根据 first_Name 进行搜索，我们将 myModel.first_Name = searchText & 类似地设置为 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;
   });

'searchText' 也需要做同样的事情。

请参阅此 plnkr 以获取完整代码并对其进行测试运行：- http://plnkr.co/edit/q9Co9stjzXI62UlWczU3?p=preview

于 2014-12-08T10:58:08.260 回答
1

我认为您可能正在以一种艰难的方式来处理多个搜索文本。但是我只是放了一个 plunkr 来演示一种方法来做到这一点，但是如果参数数量超出带宽，我的想法可能会失控

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

当查询文本更改时，您需要使用 AND 条件应用过滤器复合条件

复选框的基本设置如下

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

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

于 2014-12-08T07:22:18.833 回答