clearing / disabling a filter in AngularJS

Question

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.

Petr Averyanov · Accepted Answer · 2016-03-14 18:46:09Z

1

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

{{::mention | getPlace}}

answered Mar 14, 2016 at 18:46

Petr Averyanov

9,5963 gold badges25 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

gregdevs Over a year ago

very cool, thanks for the info, thats exactly what i was looking for. And yeh it's definitely a cleaner solution. In my case it would be <h3 class="mention" ng-bind-html="::mention | getPlace"> <span>@</span>{{mention}}</h3>

JB Nizet · Accepted Answer · 2016-03-14 17:44:59Z

1

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>

answered Mar 14, 2016 at 17:44

JB Nizet

694k94 gold badges1.3k silver badges1.3k bronze badges

1 Comment

gregdevs Over a year ago

thanks for that, that gets me in the right direction.

Collectives™ on Stack Overflow

clearing / disabling a filter in AngularJS

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related