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

修改

解释上述情况如何运作。

请记住，||和&&会返回其中一个操作数的值。

||和&&使用短路评估 - true || (anything)返回true; false && (anything)返回false - 未评估(anything)表达式。

''是假的（或使用undefined代替，如果它更清楚）

所以，

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

当''，disableFilter === false短接!disableFilter === true操作时，将评估并返回||的第二个操作数。因此，表达式的返回值为&&。

详细了解logical operators here

Answer 2

I think the following is a slightly less tricky solution. Tricky solutions cause bugs for future developers.

Here's my suggestion:

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

or

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

Simply, if shouldFilter, then give it your filter expression, otherwise give it nothing. Using a simple ternary expression will be easier for readability.

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>

这似乎是solution。

Answer 4

这就是我所做的。首先，我有一个选择控件，从我的控制器填充，带有一个静态项（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>

然后我有条不紊地在桌子上应用过滤器。当过滤器为空时出现，将其设置为undefined将其清除：

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

Answer 5

我有一个复杂的案例

有记录列表说明产品
按用户从下拉列表中选择的其他两个属性prop1，prop2进行过滤
如果用户选择2过滤器不应用，则另一个下拉列表（prop3）有两个值1和2

她是我的结果：

ng-repeat="prod in filterdProd = 
 (products | filter : model.prop3 == 2 ? '' :  
   { 'prop1': model.prop1 || 'none', 
     'prop2': model.prop2 }) | 
  orderBy: 'productrName'"

如果model.prop3 == 2 ? ''过滤器不适用，否则......

我们也可以使用filterdProd

来使用记录数

Answer 6

我发现以下解决方案更加简单有效

angular.module('myApp', []).controller('namesCtrl', function($scope) {
    $scope.package=[{"PkgServiceId":null,"PkgServicesName":" HB, TLC, DLC &amp; ESR, EDTA WHOLE BLOOD, HBSAG CONFIRMATION,SERUM, Blood Cholesterol","PromoDiscount":null,"PromoID":null,"ReportPeriod":5,"ServiceDesc":null,"ServiceId":108,"ServiceName":"Family Health Package"},{"PkgServiceId":108,"PkgServicesName":null,"PromoDiscount":null,"PromoID":null,"ReportPeriod":5,"ServiceDesc":null,"ServiceId":70,"ServiceName":"HB, TLC, DLC & ESR, EDTA WHOLE BLOOD"},{"PkgServiceId":108,"PkgServicesName":null,"PromoDiscount":null,"PromoID":null,"ReportPeriod":5,"ServiceDesc":null,"ServiceId":71,"ServiceName":"HBSAG CONFIRMATION,SERUM"},{"PkgServiceId":108,"PkgServicesName":null,"PromoDiscount":null,"PromoID":null,"ReportPeriod":3,"ServiceDesc":"Its used to evaluate your overall health and detect a wide range of disorders","ServiceId":2,"ServiceName":"Blood Cholesterol"},{"PkgServiceId":null,"PkgServicesName":" MRI Test, HB, TLC &amp; DLC, EDTA WHOLE BLOOD","PromoDiscount":null,"PromoID":null,"ReportPeriod":5,"ServiceDesc":null,"ServiceId":107,"ServiceName":"Child Health Package"},{"PkgServiceId":107,"PkgServicesName":null,"PromoDiscount":null,"PromoID":null,"ReportPeriod":5,"ServiceDesc":"Its used to evaluate your overall health and detect a wide range of disorders","ServiceId":5,"ServiceName":"MRI Test"},{"PkgServiceId":107,"PkgServicesName":null,"PromoDiscount":null,"PromoID":null,"ReportPeriod":5,"ServiceDesc":null,"ServiceId":69,"ServiceName":"HB, TLC & DLC, EDTA WHOLE BLOOD"}] ;
});

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="namesCtrl">
<ul>
      <li ng-repeat="x in package">
        {{ x.ServiceName }}
        
      </li>
    </ul>
<p>Above is the total data set without filtering.</p>
<ul>
  <li ng-repeat="x in package| filter :{PkgServiceId: null}">
    {{ x.ServiceName }}
    {{ x.PkgServiceId }}
    
  </li>
</ul>

</div>



<p>This example displays only the packages containing the packageId "null".</p>

</body>
</html>

Answer 7

在 HTML 模板绑定中

{{ dataX | date: expression ? 'dd/MM' : 'dd/MM/yyyy' }}

Answer 8

创建函数并与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' }  
 ];

我希望通过性别过滤学生成为男孩并按名称过滤。

第一个我创建了一个名为＆＃34; filterbyboy＆＃34;的函数。如下：

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

说明：如果不是过滤器名称，则显示所有其他学生按输入名称和性别过滤为＆＃39; boy＆＃39;

以下是演示How to use and operator in AngularJs example

使角度过滤器成为条件

8 个答案: