Remove item from location.search in AngularJS

Question

Here on SO there's plenty of questions like this one but none of the answers helped me so far.

I've read the Angular $window and $location docs but I can't achieve what I want from my client app.

Let's say I've a webpage where the user can set multiple filters and share them, the sharing works through GET parameters ?f=AN_HASH this triggers a query to my server which replies with the filter set matching the passed hash.

Active filters are stored in SessionStorage (via $sessionStorage from ngStorage).

Eventually the user can clear current filter set via a button. The expected flow triggered by this button should be:

Clear Session Storage item
Clear the url query parameter ?f= (I'd like to remove just this since there could be more than one parameter in the future)
Reload the page

This is the function called on ng-click:

$scope.clearFilters = function(){

    $sessionStorage.queryFilters = {} // Empty SessionStorage
    $scope.activeFilters = false      // Disable Clear button

    console.log('before:', location.search)

    // $location.search({})
    // $location.search('f', null)
    // $location.search('f', null).replace()

    console.log('after:', location.search)

    $window.location.reload() // reload the page
}

Between the two console.log you can find what I've tried so far. The two console logs prints the following:

before: ?f=THE_HASH
after: ?f=THE_HASH

apparently nothing has changed.. (also the GET query in the address bar is still there)

I tried by just emptying the location.search object like this:

$scope.clearFilters = function(){

    $sessionStorage.queryFilters = {} // Empty SessionStorage
    $scope.activeFilters = false      // Disable Clear button
    location.search = ''              // Reset location.search and reload page
}

This actually worked, but I don't like it since it removes ALL elements from the GET query and this could lead to problems in the future if I'll ever need to add more parameters which shouldn't been cleaned this way..

Other question that can provide background about my searches:

This;
This.

As @Chris suggested I tried launching: angular.element(document.body).injector().get('$location').search("f",null)

The url GET hasn't been affected. In the attached image there's what i got from the Chrome console.

Nothing of what is commented between the two `console.log` worked.. It should, as far as I understood the Angular doc, thought — fredmaggiowski, Apr 18 '16 at 12:39
What happens if you remove everything but the `$location.search()` call, does it still not work? If not try using this from Chrome console to see if it works in isolation `angular.element(document.body).injector().get('$location').search("f",null)` — Chris, Apr 18 '16 at 13:40
Hey, I saw your edit, I tested it on one of my apps and it works correctlyin that the URL changes. Does your URl not change at all? — Chris, Apr 18 '16 at 14:15
sadly not at all.. @C14L solution worked, i think the issue was related to the missing `` tag. I didn't have it before its answer, now that i've added the tag it works.. even thought the script in the chrome console is having the same behaviour (not changing the URI while printing the informations in the image) — fredmaggiowski, Apr 18 '16 at 14:20

score 1 · Accepted Answer · answered Apr 18 '16 at 10:57

Plunker and Jsbin don't seem to like it when you change the URL params, so here is the code to copy-paste into a local file.

<html lang="en" ng-app="myApp">
    <head>
      <base href="/">
      <meta charset="utf-8">
      <title>My AngularJS App</title>
      <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.3/angular.min.js"></script>
      <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.3/angular-route.min.js"></script>
    </head>

    <body>
      <div ng-controller="myCtrl">
        <button ng-click="setFltr()">set filter</button>
        <button ng-click="clrFltrVal()">clear only the value</button>
        <button ng-click="clrFltrAll()">clear entire f filter</button>
      </div>
    </body>

    <script>'use strict';

angular.module('myApp', ['ngRoute']).config(
    ['$locationProvider', function ($locationProvider) {

  $locationProvider.html5Mode(true).hashPrefix('');
}]);

angular.module('myApp').controller('myCtrl', 
    ['$scope', '$location', '$window', 
    function ($scope, $location, $window) {

  $scope.setFltr = function () {
    $location.search('f', 'something');
    $window.location.reload();
  }

  $scope.clrFltrAll = function () {
    $location.search('f', null);
    $window.location.reload();
  }

  $scope.clrFltrVal = function () {
    $location.search('f', '');
    $window.location.reload();
  }
}]);


    </script>
</html>

Thanks, i'll try this asap and let you know the result :) – fredmaggiowski Apr 18 '16 at 12:40 — fredmaggiowski, Apr 18 '16 at 12:40

Remove item from location.search in AngularJS

1 Answers1