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

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

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

<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>

---

我想可能是你在处理不止一个搜索文本时遇到了困难。但是我只是放了一个plunkr来演示一种方法，但是如果参数的数量超出了带宽，我的想法可能会失控

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

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

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

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

Plunkr

---

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

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

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

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

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

Plunkr

---

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

{{user.first\u name+''+user.last\u name}
$scope.filterUsers=函数（searchText，searchFilter）{
if（searchFilter=='firstName'）{
返回函数（user）{return user.first_name.match（searchText）；}
}
else if（searchFilter==='lastName'）{
返回函数（user）{return user.last_name.match（searchText）；}
}
否则{
返回函数（user）{return user.first_name.match（searchText）| user.last_name.match（searchText）；}
}
};

---

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

{{user.first\u name+''+user.last\u name}
$scope.filterUsers=函数（searchText，searchFilter）{
if（searchFilter=='firstName'）{
返回函数（user）{return user.first_name.match（searchText）；}
}
else if（searchFilter==='lastName'）{
返回函数（user）{return user.last_name.match（searchText）；}
}
否则{
返回函数（user）{return user.first_name.match（searchText）| user.last_name.match（searchText）；}
}
};

---

您不需要添加3个文本框。如果在两个控件的模型上都放置一个watch表达式（搜索和选择），则可以完成此操作。 所有需要做的就是根据一个变量进行过滤，您可以动态地将值分配给该变量（在watch表达式中）。 例如，如果您想根据first_Name进行搜索，我们将myModel.first_Name=searchText&类似地设置last_Name。如果在下拉列表中没有选择任何内容，则设置myModel=searchText

HTML

对于“searchText”，也需要这样做

请参阅本plnkr以获取完整代码并进行测试运行：-

---

您不需要添加3个文本框。如果在两个控件的模型上都放置一个watch表达式（搜索和选择），则可以完成此操作。 所有需要做的就是根据一个变量进行过滤，您可以动态地将值分配给该变量（在watch表达式中）。 例如，如果您想根据first_Name进行搜索，我们将myModel.first_Name=searchText&类似地设置last_Name。如果在下拉列表中没有选择任何内容，则设置myModel=searchText

HTML

对于“searchText”，也需要这样做

请参阅本plnkr以获取完整代码并进行测试运行：-

---

您能提供控制器的代码吗？非常基本：

$http.get（“/users”）.success（函数（数据）{$scope.users=data；}）

users数据是json格式的，其中包括first\u name和last\u name的键值对。filter:searchText似乎有问题，因为现在该值位于searchText.first\u name或searchText.last中_name@WayneEllery我想你是对的！但我如何避免这种情况呢/你有你的json数据吗？你能为你的控制器提供代码吗？非常基本：

$http.get（“/users”）.success（函数（数据）{$scope.users=data；}）

users数据是json格式的，其中包括first\u name和last\u name的键值对。filter:searchText似乎有问题，因为现在该值位于searchText.first\u name或searchText.last中_name@WayneEllery我想你是对的！但我如何避免这种情况呢/你有你的json数据吗？除了一件事之外，这正是我最后要做的

searchFilter

可以通过作用域访问，即

$scope.searchFilter

，因此您不必将其作为参数传递。谢谢你的帮助！除了一件事之外，这正是我最终要做的

searchFilter

可以通过作用域访问，即

$scope.searchFilter

，因此您不必将其作为参数传递。谢谢你的帮助！

<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); }
    }
};

     <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>

$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;
   });