Making an angular filter conditional

Question

I'm currently using a text input to filter a list of items. I'd like to make it so when a particular variable is set, the list doesn't filter, regardless of what the text input is. Any advice on how I can accomplish this?

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

possible duplicate of Conditionally apply filters with ng-repeat — Aaron
– Aaron, Commented Apr 20, 2015 at 2:13
I guess it may be a duplicate... though I can't say I'm happy with the answer provided there :) — Rohit
– Rohit, Commented Apr 20, 2015 at 2:15

New Dev · Accepted Answer · 2020-04-08 23:41:37Z

104

You can achieve this if you set the filter expression to '' (or undefined) - this causes the filter not to be applied - for when your disableFilter is set, or to the actual filter expression otherwise.

EDIT 2: The other answer (below by @Ryan) is simpler and easier to understand. Can't remember now whether it didn't work for me initially or I simply didn't think of this simpler way.

So, assuming, this toggling variable - disableFilter - is a boolean :

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

(with filterExpression being whatever the expression you want to filter by). Your specific case would be:

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

EDIT:

To explain how the above works.

Remember that || and && return the value of one of its operands.
|| and && use short-circuit evaluation - true || (anything) returns true; false && (anything) returns false - without evaluating the (anything) expression.
'' is falsy (or use undefined instead, if it's clearer)

And so,

when disableFilter === true, !disableFilter === false, thus the second operand of || - the empty string '' - is evaluated (it's falsy), and (!disableFilter || '') returns '' - a falsy value, which short-circuits the && operation and does not evaluate the second operand of &&. The return value of the expression is thus ''.

when disableFilter === false, !disableFilter === true, which short-circuits the || operation, then the second operand of && is evaluated and returned. The return value of the expression is thus {value: search}.

13 Comments

Rohit Over a year ago

Awesome! This was the kind of thing I was trying to do! but I don't quite understand it, and hope you can expound. Isn't that saying if disableFilter is false or blank string? I don't understand how that equates.

Rohit Over a year ago

That's fantastic! I completely neglected that in JS, logic between non-boolean values still evaluate as truey or falsy as you put it. I think the blank string, the falsy, is what threw me off.

chovy Over a year ago

not sure what i'm doing wrong but it doesn't work for me. when !disableFilter is true my filter weeds out all items in the list. I'm assuming I can pass a scope.myFilterText as the value in { value: myFilterText }?

New Dev Over a year ago

@chovy, if you removed the (!disableFilter || '') part, would it filter correctly?

Mahdi Mehrizi Over a year ago

Just found a way: filter : (doFilter?{value:search}:'') :(doFilter?true:false)

|

Ryan · Accepted Answer · 2016-04-04 16:39:00Z

54

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.

answered Apr 4, 2016 at 16:39

Ryan

8047 silver badges9 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 12:26:19Z

7

Maybe use an 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>

That seems to be the solution.

edited May 23, 2017 at 12:26

CommunityBot

11 silver badge

answered Apr 20, 2015 at 2:13

Aaron

2,5053 gold badges27 silver badges33 bronze badges

1 Comment

Younes Yaas Over a year ago

It's work, but if we want to know the array's length (For infinite scroll), we can't ... :/

steveareeno · Accepted Answer · 2015-11-20 14:06:57Z

7

Here is what I did. First, I had a select control, populated from my controller, with one static item (Select...) with a zero length string value:

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

Then I applied the filter conditionally on the table. It appears when the filter is null, setting it to undefined clears it:

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

edited Nov 20, 2015 at 14:06

answered Nov 13, 2015 at 18:30

steveareeno

1,9876 gold badges41 silver badges63 bronze badges

1 Comment

Sumant Over a year ago

I just use terneary as <tr data-ng-repeat="courtEntity in courts | filter:(districtFilter === null )? undefined : districtFilter}">.

Ali Adravi · Accepted Answer · 2017-11-28 17:48:11Z

0

I had a complicated case

Have a list of records say it products
Filter by two other property prop1, prop2 selected by user from drop down
Another dropdown (prop3) have two value 1 and 2, if user select 2 filter should not be applied

Hers is my outcome:

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

if model.prop3 == 2 ? '' filter will not apply otherwise ...

We can also use the count of records by using filterdProd

answered Nov 28, 2017 at 17:48

Ali Adravi

23k9 gold badges93 silver badges97 bronze badges

Comments

Projesh Pal · Accepted Answer · 2018-05-07 09:18:38Z

I found the following solution more easy and effective

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>

Augusto Savi · Accepted Answer · 2021-02-24 12:09:18Z

0

In HTML Template Binding

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

answered Feb 24, 2021 at 12:09

Augusto Savi

11 bronze badge

Comments

Lewis Hai · Accepted Answer · 2015-10-09 03:34:46Z

Make functions and combine with filterExpression.

Example I have a students list as below:

$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' }  
 ];

I want to filter students via gender to be boy and filter by name of them.

The first I create a function named "filterbyboy" as following:

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

Explaination: if not filter name then display all students else filter by input name and gender as 'boy'

Here is a demo How to use and operator in AngularJs example

Collectives™ on Stack Overflow

Making an angular filter conditional

8 Answers 8

13 Comments

Comments

1 Comment

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

13 Comments

Comments

1 Comment

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related