How to clear a filter?

[harsh...@gmail.com]

Hi all,

I am new to AngularJS and was playing with the filters. I have a similar page to this example - http://docs.angularjs.org/api/ng.filter:filter

I can't figure out how to clear the applied filters on a button click. I tried to set the select menu value to null on click using plain javascript but was unable to clear the filter.

 Also, i can't get any jQuery code inside the controller function to work either. Targeting an element with a jQuery selector has no effect. 

Any suggestions are appreciated.

[Justin L.]

To use the example that is from the documentation, you can do a couple of things. The easiest is to just declare the model, which in this case is searchText, and assign a null value to it on ng-click. See here: http://jsfiddle.net/f2zep/ 

The second way to do it, which is a better way long-term, is to do something like this: http://jsfiddle.net/5vDet/ This way you are keeping your logic separate from your view by placing it in the controller. The "Angular Way" is to do everything within the $scope of the application. Using plain-old Javascript can be done, but you are now acting outside of the framework, where Angular doesn't observe changes.

As far as jQuery, Angular comes packaged with jQuery Lite, and should work out of the box, by using angular.element([use native JS element selection]).doSomething. Angular will use full jQuery if it is available at the time of code execution. But, it is not recommended to do DOM work inside your controller. For that, it's recommended to use directives. 

Why won't your jQuery work? Well, there are many reasons; for me to help, I'd have to see an example of your code and how you are loading the scripts.

[Michael Bielski]

To get jQuery to work inside controllers you need to namespace it like this:

var $jq = jQuery.noConflict();

Justin is right, though. DOM changes should be done by functions outside of the controller. Directives are the best spot, but you can also write a function that uses jQuery (but is in a separate file that is also loaded on the page) and have the controller call it.