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尝试更多项目。

为了满足您的这一特定要求（即在null中处理search值，就好像它根本没有定义），您可以定义一个接收项目的函数（基于search object）确定是否应该过滤掉它。

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

E.g：

<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，就好像它根本不存在一样。

E.g：

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

angularjs：使用组合框过滤数组

1 个答案: