Making an angular filter conditional

by

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.

  1. Remember that || and && return the value of one of its operands.
  2. || and && use short-circuit evaluation – true || (anything) returns true; false && (anything) returns false – without evaluating the (anything) expression.
  3. '' 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}.

Read more about logical operators here

More Related Contents:

  1. Is this a “Deferred Antipattern”?
  2. AngularJS 1.5+ Components do not support Watchers, what is the work around?
  3. Angular HttpPromise: difference between `success`/`error` methods and `then`’s arguments
  4. How do you prevent duplicate user properties in Firebase?
  5. What is the difference between ng-if and ng-show/ng-hide
  6. How to format date in angularjs
  7. Use of ng-src vs src
  8. AngularJS Paging with $location.path but no ngView reload
  9. How to format a date using ng-model?
  10. Descending order by date filter in AngularJs
  11. angular.js link behaviour – disable deep linking for specific URLs
  12. Can I inject a service into a directive in AngularJS?
  13. Otherwise on StateProvider
  14. AngularJS ng-options create range
  15. How can I check which version of Angular I’m using?
  16. Call a method of a controller from another controller using ‘scope’ in AngularJS
  17. Adding http headers to window.location.href in Angular app
  18. How do I sequentially chain promises with angularjs $q?
  19. Mongo Giving ‘duplicate key error’ on non-unique fields
  20. Using ng-repeat to generate select options (with Demo)
  21. What are the differences between ng-repeat and ng-options and why do they not behave the same way?
  22. How do I increase modal width in Angular UI Bootstrap?
  23. Display number always with 2 decimal places in
  24. Run a controller function whenever a view is opened/shown
  25. Angularjs ng-options using number for model does not select initial value
  26. How to create a AngularJS promise from a callback-based API
  27. How to obtain previous item in ng-repeat?
  28. Dealing with DOM Manipulations in AngularJS
  29. AngularJS $http vs service vs ngResource
  30. Redirect to new Page in AngularJS using $location

Leave a Comment