How to show/hide filer for ng-repeat for AngularJs 1.4.8

Question

I got a list of messages with filter:

<tr ng-repeat="message in messages | filter:searchForMessage">

and this is a button:

<a href="#" ng-click="search()">
        <img src="../common/magnifier.png">
</a>

but I would like to hide/show this filter only on click on the Search button:

$scope.showSearchPanel = false;
    $scope.search = function(){
        $scope.showSearchPanel = !$scope.showSearchPanel;
    }

Are there any way how I could do that? Thank you!

Answer 1

You can use

<tr ng-if="showSearchPanel" ng-repeat="message in messages | filter:searchForMessage">

It will show after clicking on search button

Answer 2

You could add the variable in the filter to switch it on and off.

<tr ng-repeat="message in messages | filter:searchForMessage: showSearchPanel">

Then inside the filter you can validate if "showSearchPanel" return filtered results otherwise return same results