如何清除滤镜- AngularJS

I'm very new to AngularJS and was playing with filters today. I was able to apply the filter filter to display only rows matching the criteria from the select menus. However, I was unable to add a "clear filter" function to the button. How can I reset the filter when the button is clicked?

我对AngularJS很陌生，今天我在玩滤镜。我可以应用filter过滤器只显示与select菜单中的条件匹配的行。但是，我无法向按钮添加“清除过滤器”功能。单击按钮时如何重置过滤器?

In the following Plunker, you can see the code I was using in attempts achieve this: Plunker - AngularJS Sample

在下面的Plunker中，您可以看到我在尝试实现这一目标时使用的代码:Plunker - AngularJS示例

3 个解决方案

#1

You can use ng-click to bind click handler to clear query variable within a scope.

您可以使用ng-click绑定单击处理程序以清除范围内的查询变量。

http://plnkr.co/edit/p1DnoV

#2

The ng-click directive can be used to set the filter model to any falsey-but-not-false Javascript value, such as '', undefined, null or {}.

可以使用ng-click指令将过滤器模型设置为任何虚假但非虚假的Javascript值，例如“、未定义的、null或{}。

In the following code, clicking on the div would reset the customFilter model.

在下面的代码中，单击div将重置customFilter模型。

<input type="text" ng-model="customFilter" />
<div ng-click="customFilter = undefined">
    Clear Filter
</div>

Here's a link to an updated fork of your Plunker project using Angular v1.4.1

这里有一个链接到您的柱塞项目的一个更新的分支使用角v1.4.1

#3

This example will help you to clear filters if you are using the ng-table filter

如果您正在使用ng-table过滤器，这个示例将帮助您清除过滤器

<table ng-table="tableParams" show-filter="true" class="table table-striped table-bordered table-condensed table-hover cf">
    <tbody>
        <tr ng-repeat="tableData in $data">
            <td data-title="'Name'" filter="{Name:'text'}" sortable="'{Name}'" />
        </tr>
    </tbody>
</table>

You can clear filter from ng-click as below

您可以从ng-click中清除过滤器，如下所示

$scope.tableParams.parameters({ filter: {}, sorting: {}, page: 1 });

#1