使角度过滤器成为条件

Question

我目前正在使用文本输入来过滤项目列表.我想在设置特定变量时这样做,无论文本输入是什么,列表都不会过滤.关于如何实现这一目标的任何建议？

<a ng-repeat="set in data | filter: { value: search }" data-id="{{set.id}}" ng-mousedown="setBox(set)" ng-mouseover="setSelected(set, $event)" ng-bind-html="set.value | trustHTML"></a>

Answer 1

如果将过滤器表达式设置为''(或undefined),则可以实现此目的- 这会导致不应用过滤器 - 用于disableFilter设置时,或者实际过滤器表达式.

所以,假设,这个切换变量 - disableFilter- 是一个布尔值:

<a ng-repeat="set in data | filter: (!disableFilter || '') && filterExpression">

(filterExpression无论你想过滤什么表达式).你的具体情况是:

<a ng-repeat="set in data | filter: (!disableFilter || '') && {value: search}">

编辑:

解释以上是如何工作的.

1. 请记住||并&&返回其操作数之一的值.
2. ||并&&使用短路评估 - true || (anything)退货true; false && (anything)返回false- 不评估(anything)表达式.
3. ''是假的(或使用undefined相反,如果它更清楚)

所以,

当disableFilter === true,!disableFilter === false因此第二个操作数||- 空字符串''- 被评估(它是假的),并(!disableFilter || '')返回''- 一个假值,它使&&操作短路并且不评估第二个操作数&&.因此表达式的返回值''.

当disableFilter === false,!disableFilter === true将||操作短路,然后&&评估并返回第二个操作数.因此表达式的返回值{value: search}.

阅读有关逻辑运算符的更多信息

Answer 2

我认为以下是一个稍微不那么棘手的解决方案.棘手的解决方案会给未来的开发人员带来错误.

这是我的建议:

<a ng-repeat="set in data | filter: (shouldFilter ? filterExpression : '')">

要么

<a ng-repeat="set in data | filter: (shouldFilter ? {value: search} : '')">

简单地说,如果是shouldFilter,那么给它你的过滤器表达式,否则什么也不给它.使用简单的三元表达式将更易于阅读.

Answer 3

也许用一个ng-if？

<a ng-if="!myConditional" ng-repeat="set in data" data-id="{{set.id}}" ng-mousedown="setBox(set)" ng-mouseover="setSelected(set, $event)" ng-bind-html="set.value | trustHTML"></a>
<a ng-if="myConditional" ng-repeat="set in data | filter: { value: search }" data-id="{{set.id}}" ng-mousedown="setBox(set)" ng-mouseover="setSelected(set, $event)" ng-bind-html="set.value | trustHTML"></a>

这似乎是解决方案.

Answer 4

这就是我做的.首先,我有一个select控件,从我的控制器填充,有一个静态项(Select ...),其长度为零字符串值:

<select data-ng-model="districtFilter" class="form-control" data-ng-options="d.DistrictId as d.DistrictName for d in districts | orderBy: 'DistrictName'"><option value="">Select...</option></select>

然后我有条不紊地在桌子上应用了过滤器.当过滤器为null时,将其设置为undefined会将其清除:

<tr data-ng-repeat="courtEntity in courts | filter:{ 'DistrictId' : districtFilter === null ? undefined : districtFilter}">