Question

我正在尝试使用多个下拉条件进行过滤。我能够弄清楚如何逐个过滤它们。我希望他们在没有选择时显示所有内容，值=＆＃34;＆＃34;。

<select class="form-control" ng-model="filter.grade">
  <option ng-repeat="grade in product_grades" value="{{grade}}">{{grade}}</option>
</select>

<select class="form-control" ng-model="filter.slump">
  <option ng-repeat="slump in product_slumps" value="{{slump}}">{{slump}}</option>
</select>

<select class="form-control" ng-model="filter.flow">
  <option ng-repeat="flow in product_flows" value="{{flow}}">{{flow}}</option>
</select>

<select class="form-control" ng-model="filter.last_delivered">
  <option ng-repeat="last_delivered in product_last_delivereds" value="{{last_delivered}}">{{displayDate(last_delivered)}}</option>
</select>

<tr ng-repeat="job_product in job_products | filter : customFilter">

对于一次下拉，我使用它。

$scope.customFilter = function (data) {
    if (data.Grade === $scope.filter.grade) {
      return true;
    } else if ($scope.filter.grade === '') {
      return true;
    } else {
      return false;
    }
  };

但是当我将它用于多个下拉列表时，它可以正常工作。

$scope.customFilter = function (data) {
    if (data.Grade === $scope.filter.grade && 
      data.Slump === $scope.filter.slump && 
      data.Flow === $scope.filter.flow && 
      data.LastDlvDate === $scope.filter.last_delivered) {
      return true;
    } else if ($scope.filter.grade === '') {
      return true;
    } else {
      return false;
    }
  };

当我选择放置选项时，它不会显示任何内容。

这是一名掠夺者：

http://plnkr.co/edit/elwmuqLvhYhIw3rUrEO1?p=preview

我不确定为什么$ filter的日期不起作用。

但是我想在选择成绩=＆＃34; 1＆＃34;。

时展示具体的A.

Answer 1

以下是一个工作示例 - http://plnkr.co/edit/VTnbqchrdsrN5w0mflji?p=preview

出了什么问题？

$scope.customFilter条件错误 - data.grade === $scope.filter.grade。每个$scope.filter.*的默认值为空字符串''，因为您一起使用了&&个，而data.grade被选中，其他'' === undefined结束了false为!$scope.filter.grade || data.grade === $scope.filter.grade && ...。所以我将条件更改为true。这是有效的，因为我检查选择是否完全没有改变，我通过返回data忽略它，然后如果所选择的等于} else if ($scope.filter.grade === '') {。这也使$scope.filter.grade = "";无关紧要。

有关实施的补充说明：

您不必初始化范围变量$scope.displayDate，Angular将首先选择更改。
修正了日期过滤器部分，不需要{{last_delivered | date: 'dd-MM-yyyy'}}。您可以在模板i <= strand1.length

具有多个下拉条件的角度自定义过滤器

1 个答案: