制作有条件的angular度filter

我目前正在使用文本input来过滤项目列表。 我想这样做,当一个特定的variables设置,列表不会过滤,无论文本input是什么。 任何意见,我怎么能做到这一点?

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

如果将filterexpression式设置为'' (或undefined ) – 这会导致不应用filter – 当您设置disableFilter时,您可以实现此目的,否则,可以实现filterexpression式。

所以,假设,这个切换variables – disableFilter – 是一个布尔值:

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

filterExpression是你想要过滤的expression式)。 你的具体情况是:

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

编辑:

解释如何工作。

  1. 请记住||&&返回它的一个操作数的值。
  2. ||&&使用短路评估 – true || (anything) true || (anything)返回true ; false && (anything)返回false – 不计算(anything)expression式。
  3. ''是虚假的(或者使用undefined ,如果它更清楚)

所以,

disableFilter === true!disableFilter === false ,因此||的第二个操作数 – 空string'' – 被评估(这是虚假的), (!disableFilter || '')返回'' – 一个虚假值,这会使&&操作短路,不评估&&的第二个操作数。 expression式的返回值就是''

disableFilter === false!disableFilter === true ,这会使||短路 操作,则&&的第二个操作数被评估并返回。 expression式的返回值是{value: search}

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

我认为以下是一个稍微不太棘手的解决scheme。 棘手的解决scheme为未来的开发人员带来错误。

这是我的build议:

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

要么

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

简单地说,如果shouldFilter,那么给它你的filterexpression式,否则什么都不给。 使用简单的三元expression式将更易于阅读。

这是我做的。 首先,我有一个select控件,从我的控制器中填充一个具有零长度string值的静态项目(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> 

然后,我有条件地在桌子上应用filter。 它出现在filter为空时,将其设置为undefined清除它:

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

也许使用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> 

这似乎是解决scheme 。

使函数和filterExpression结合。

示例我有一个学生名单如下:

 $scope.students = [ { name: 'Hai', age: 25, gender: 'boy' }, { name: 'Hai', age: 30, gender: 'girl' }, { name: 'Ho', age: 25, gender: 'boy' }, { name: 'Hoan', age: 40, gender: 'girl' }, { name: 'Hieu', age: 25, gender: 'boy' } ]; 

我想通过性别筛选学生是男孩,并按他们的名字过滤。

首先我创build一个名为“filterbyboy”的函数,如下所示:

 $scope.filterbyboy = function (genderstr) { if ((typeof $scope.search === 'undefined')||($scope.search === '')) return (genderstr = "") else return (genderstr = "boy"); }; 

解释:如果不是filter名称,则显示所有学生按input名称和性别过滤为“男孩”

这里是一个演示如何在AngularJs中使用和运算符的例子