在 angularjs 中单击按钮时使用多个字段选项过滤数据

Question

>我有 3 个过滤器选项，需要在单击按钮时根据给定的过滤条件过滤数据。第一个是搜索用户名的输入文本框，第二个是日期范围筛选器，第三个是下拉列表。

例如，如果用户名字段

不为空，并且日期范围筛选器也有值，但下拉值与默认值没有变化，则应使用用户名字段和日期范围筛选器进行搜索。

到目前为止，我实现的一次只搜索过滤器选项。因此，如果我输入用户名和日期范围，它只会返回用户名的结果，因为它首先被过滤。

这就是我目前所拥有的。我似乎找不到任何帮助。我需要帮助，请。谢谢

模板

<div>
 <div>
  <h5>Username / Email<span></h5>
  <input ng-model="userInput.username">
 </div>
 <div>
  <label>Date range</label>
  <div class="input-group">
   .....
   <input type="text" data-ng-model="userInput.dateRange_start">
   ..........
   .........
  </div>
  <label>to</label> 
  <div class="input-group">
   .....
   <input type="text" data-ng-model="userInput.dateRange_end">
   ..........
   .........
  </div>
 </div>
 <div><h5>Dropdown filter</h5>
  <select ng-model="userInput.dropdown ng-options="x for x in 
  x_items track by x">
  </select>
 </div>
 <button ng-click="searchItem()">Search</button>
</div>
<table>
 <thead>
  <tr>
   <th>Username</th>
   <th>Date</th>
   <th>Cars</th>
  </tr>
 </thead>
 <tbody>
  <tr ng-repeat="item in search">
   <td>{{ item.username }}</td>
   <td>{{ item.dateRange }}</td>
   <td>{{ item.cars }}</td>
  </tr>
 </tbody>
</table>

控制器

 $scope.userInput = {
   username: "",
   dateRange_start:"",
   dateRange_end:"",
   dropdown: "Select one"
 }
 $scope.searchItem = function() {
  $scope.allHistory = [];
  $scope.allHistory = data;
    if ($scope.userInput.username !== "") {
       $scope.$apply(function() {
          $scope.search = $filter("filter")($scope.allHistory, 
          $scope.userInput.username);
       });
    } else if ($scope.userInput.dateRange_start !== "" || 
      $scope.userInput.dateRange_end !== "") {
         $scope.$apply(function() {
            $scope.search = $filter("dateRangefilter")
            ($scope.allHistory, $scope.userInput.dateRange_start, 
            $scope.userInput.dateRange_end)
          });
     } else if ($scope.userInput.dropdown_selected[0].toLowerCase()  
        !=== "Select one") {
          $scope.search = $filter("filter")($scope.allHistory, 
          $scope.userInput.dropdown_selected[0]);
     } else {
          sweetAlert(
            "Form submission error",
            "Please enter value in at least one of the field below",
            "error"
          );
      }
 }

Answer 1

您

正在运行if...else因此只有第一个匹配的过滤器才能完成这项工作。您应该将其更改为链if s。

$scope.search = $scope.allHistory;
if (filter 1 has value) {
  $scope.search = $filter(f1)($scope.search, f1_value);
}
if (filter 2 has value) {
  $scope.search = $filter(f2)($scope.search, f2_value);
}

Answer 2

<tr ng-repeat="item in search|filter:userInput">
   <td>{{item.username}}</td>
   <td>{{item.dateRange}}</td>
   <td>{{item.cars}}</td>
</tr>