如何清除过滤器 - AngularJS

Question

我对AngularJS非常陌生，今天在测试过滤器时遇到了问题。我成功地应用了filter 过滤器来仅显示符合选择菜单条件的行，但是我无法在按钮上添加“清除过滤器”的功能。当单击该按钮时，如何重置过滤器？

在以下Plunker中，您可以看到我尝试使用的代码： Plunker - AngularJS示例

- Sparda

Answer 1

< p > ng-click指令可用于将过滤器模型设置为任何虚值但不是false的Javascript值，例如''，undefined，null或{}。

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

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

这是一个链接，指向使用Angular v1.4.1更新的您的Plunker项目的分支

- Walter Roman

---

一种非常快速和整洁的方法，无需将点击功能添加到控制器中。非常简单。 - Neel

那个提示对我很有帮助。然而，我发现清除输入的ng-model并没有解决我的问题，我需要清除筛选对象，例如<tbody><tr ng-repeat="r in report | filter:search">。所以<button ng-click="search=undefined">清除</button>。 - JoeKir

@JoeKir 我在我回答中提供的Plunkr中添加了一个<input type="text" ng-model="foo">示例链接。 - Walter Roman

如何将您的解决方案应用于<option value="">计划</option>。 我正在通过动态创建数组来为选择标签创建选项。 angular.forEach($scope.leadDetail, function(value,key){ var index = $scope.productArray.indexOf(value.Product); if(index === -1) { $scope.productArray.push(value.Product); } - Akhilesh Kumar

Answer 2

您可以使用ng-click将点击处理程序绑定到范围内的清除query变量。

http://plnkr.co/edit/p1DnoV

- Tosh

---

如果我只想清除卧室的筛选器，我尝试了 $scope.query.bedroom={}，但它没有起作用。 - naCheex

Answer 3

如果您正在使用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>

您可以通过以下方式从ng-click中清除过滤器

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

- Charan Ghate