angularjs：使用组合框过滤数组

Question

我知道如何以输入文本作为过滤器来过滤数组。 是否可以使用带有组合框的 angularjs 的过滤器属性作为过滤器选项？

例如，我有一组年份：[2014,2014,2013,1987,1987] 我想使用具有以下值的组合框过滤此数组：{blank,2014,2013,1987} 在此组合框中，如果单击空白，则数组显示初始值，否则显示过滤后的值。

如果我单击 Select 标记的第一个选项，下面的代码不允许我重新初始化数组：

<select ng-model="search.date" ng-options="year for year in years">
        <option value=""></option>
</select>
<table class="table table-striped">
     <thead>
       <tr>
          <th>Label</th>
          <th>Categorie</th>
          <th>Montant</th>
          <th>Date</th>
       </tr>
     </thead>
     <tbody>
        <tr ng-repeat="budget in filteredBudgets | filter:search:strict">
          <td>{{budget.label}}</td>
          <td>{{budget.category}}</td>
          <td>{{budget.real}}</td>
          <td>{{budget.date}}</td>
        </tr>
     </tbody>
</table>

提前致谢。

Answer 1

问题是一旦你选择了空选项，modelValue 就变成了null。
因此，将对象{date: null} 传递给filter，它将尝试使用date: null 的许多项目。

为了满足您的这一特定要求（即将search 中的null 值视为根本没有定义），您可以定义一个接收项目的函数并且（基于search 对象) 确定是否应将其过滤掉。

然后，您可以将该谓词函数用作 Angular 的 filter 过滤器的参数。

例如：

<tr ng-repeat="budget in filteredBudgets | filter:filterBySearch">

$scope.filterBySearch = function (item) {
    return Object.keys($scope.search || {}).every(function (key) {
        var value = $scope.search[key]; 
        return (value === undefined) || 
               (value === null) ||
               value === item[key];
    });
};

另请参阅此short demo。

---

here 提供了一个稍微复杂一点的演示。它允许将strict 参数传递给谓词函数。

---

更新

另一种方法是实现具有以下功能的自定义指令（并将其添加到<select> 元素）：

它将监视模型值的变化并将任何 null 值转换为 undefined。
这解决了问题，因为如果search 的属性的值为undefined，就好像它根本不存在。

例如：

<select ... null-is-undefined>...</select>

app.directive('nullIsUndefined', function () {
    return {
        restrict: 'A',
        require: 'ngModel',   // <-- this is required for accessing the ngModelController
        link: function postLink(scope, elem, attrs, modelCtrl) {
            modelCtrl.$parsers.push(function (newViewValue) {
                if (newViewValue === null) {
                    newViewValue = undefined;
                }
                return newViewValue;
            });
        }
    };
});

另请参阅此short demo。