CODEWITHSUNDEEP
angularjs
gregdevs
gregdevs

Reputation: 713

clearing / disabling a filter in AngularJS

I am curious if there is a way to disable a filter once its been applied.

for instance:

<h3 class="mention" ng-bind-html="mention | getPlace" place-directive >&nbsp;<span>@</span>{{mention}}</h3>

filter: 

hungryApp.filter('getPlace', function($stateParams) {
  return function(place) {
      return '<a>' + '@' + place.placeinfo.placename + '</a>';
  }
});

Once the element is rendered, is there an angular way for that filter to not effect the elements it has already filtered?

I was able to come up with a dirty solution of writing a directive that basically replaces the element with a cloned copy, but definitely not the cleanest solution.

Thanks for any suggestion.

Upvotes: 0

Views: 41

Answers (2)

Petr Averyanov
Petr Averyanov

Reputation: 9476

Answer is accepted but actually not good. As in Angular 1.4 one time binding was introduced:

{{::mention | getPlace}}

Upvotes: 1

JB Nizet
JB Nizet

Reputation: 691755

Accept a boolean parameter in your filter, and make it return the input, untouched, if the boolean is true (or false). Then pass a boolean variable as argument to your filter, and toggle it to change the behavior of the filter:

hungryApp.filter('getPlace', function($stateParams) {
  return function(place, ignore) {
      if (ignore) {
          return place;
      }
      else {
          return '<a>' + '@' + place.placeinfo.placename + '</a>';
      }
  };
});

In the controller:

$scope.placeFilteringIgnored = false;

$scope.togglePlaceFiltering = function() {
    $scope.placeFilteringIgnored = !$scope.placeFilteringIgnored;
}

And in the view:

<h3 class="mention" ng-bind-html="mention | getPlace:placeFilteringIgnored"></h3>

<button ng-click="togglePlaceFiltering()">Toggle place filtering</button>

Upvotes: 1

Related Questions