在angularjs

Question

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

E.g如果用户名字段不为空且日期范围过滤器也有值，但下拉值未从默认值更改，则应使用用户名字段和日期范围过滤器执行搜索。

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

这是我到目前为止所拥有的。我似乎无法找到任何帮助。我需要帮助。感谢

模板

<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

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

Answer 2

您正在运行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);
}