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
– fredmaggiowski, Commented Apr 18, 2016 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
– Chris, Commented Apr 18, 2016 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
– Chris, Commented Apr 18, 2016 at 14:15
sadly not at all.. @C14L solution worked, i think the issue was related to the missing <base> 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
– fredmaggiowski, Commented Apr 18, 2016 at 14:20

C14L · Accepted Answer · 2016-04-18 10:57:16Z

1

+50

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>

answered Apr 18, 2016 at 10:57

C14L

12.6k4 gold badges43 silver badges53 bronze badges

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

1 Comment

fredmaggiowski Over a year ago

Thanks, i'll try this asap and let you know the result :)

Collectives™ on Stack Overflow

Remove item from location.search in AngularJS

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related