Menu
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> 
337
Adding Filters to Expressions Filters can be added to expressions by using the pipe character | , followed by a filter.
Using filters in view templates Filters can be applied to the result of another filter. This is called "chaining" and uses the following syntax: {{ expression | filter1 | filter2 | ... }} E.g. the markup {{ 1234 | number:2 }} formats the number 1234 with 2 decimal points using the number filter.
Introduction to AngularJS Custom Filter. In AngularJS filters are used to modify or update the data before rendering the data on view or UI. Filters are clubbed in expression or directives using pipe (|) symbol.
Steps to Create a Custom Filter Create an AngularJS application. Use (dot) .filter API provide by AngularJS framework to add. Pass a filter name and filter function to custom. Write logic for transforming the input to output in return.
Stateful filters It is strongly discouraged to write filters that are stateful, because the execution of those can't be optimized by AngularJS, which often leads to performance issues. Many stateful filters can be converted into stateless filters just by exposing the hidden state as a model and turning it into an argument for the filter.
We will introduce how to use if statements in angular applications and discuss examples. In programming, if statements are logical blocks. These conditional statements tell the computer what to do when a particular condition is true or false.
By setting the ng-model directive on an input field, we can use the value of the input field as an expression in a filter. Type a letter in the input field, and the list will shrink/grow depending on the match:
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.
|| 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}.
Read more about logical operators here
87
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
