Angular UI-Router resetting querystring params on reload

Question

I currently have a state that looks like this:

.state('test-event-list', {
    parent: 'private',
    url: '/test-events?search&sortc&sortd&pagesize&page&select&status',
    reloadOnSearch: false,
    views: {
        'view@body': {
            templateUrl: 'app/config-test/test-event/list.html',
            controller: require('./config-test/test-event/list')
        }
    },
    data: {
        auth: true
    }
})

I am using $location.search() to set the different parameters such as sorting, list size and list page in the querystring.

So for example, the URL could look like this:

/test-events?pagesize=25&page=1

I have a menu that has the following link to select the tests event list:

<a ui-sref="test-event-list" ui-sref-opts="{reload: true, inherit: false}">Tests</a>

While in the state "test-event-list", clicking this link, does partly what I want: reset the list's parameters and reload the page. But what it's not doing is remove the params from the query string.

How could I go about removing "?pagesize=25&page=1" from the URL?

The inherit flag provided by ui-router doesn't seem to be doing much. I am using the latest version of ui-router (0.2.15).

Could you provide a plunker with this behaviour ? I'd really like to see how we can solve this. — Okazari
– Okazari, Commented May 28, 2015 at 13:42
Did you try to set them to null ? ui-sref="test-event-list({pagesize : null, page : null})" This may work. — Okazari
– Okazari, Commented May 28, 2015 at 13:46
@Okazari I'd rather not set them individually because if the params get changed, I would have to go back and redo all the menu items. I'll see if I can get a plunker up for ya — Xander
– Xander, Commented May 28, 2015 at 13:54
that's true, that's wasn't a good idea for code maintainability — Okazari
– Okazari, Commented May 28, 2015 at 13:56
@Okazari I tried setting them to null and it didn't work. I think I tried that as well at some point. Since they are querystring params and not state params that wouldn't work anyway. — Xander
– Xander, Commented May 28, 2015 at 13:57

rave · Accepted Answer · 2015-05-29 07:48:34Z

7

You could try to go:

<a ui-sref="test-event-list({})" ui-sref-opts="{reload: true, inherit: false}">Tests</a>

because query strings parameters are not mandatory

answered May 29, 2015 at 7:48

rave

1,0322 gold badges12 silver badges23 bronze badges

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

2 Comments

Xander Over a year ago

Thanks for the suggestion rave but I have already tried that and no dice sadly. The querystring is not removed from the URL.

Sephy Over a year ago

Thanks rave, this actually did work for me. angular v1.3.14 + ui-router v0.2.15

mrdeleon · Accepted Answer · 2016-01-27 19:14:07Z

3

I had this same issue where I just wanted to remove the query from the end of the URL. I was able to remove the query by passing an empty string for each param. It would look something like this for you.

<a ui-sref="test-event-list({ pagesize: '', page: '' })">Tests</a>

For me is was a little different. I didn't need to pass in the current routes name.

<a ui-sref="{ date: '' }">all logs</a>

answered Jan 27, 2016 at 19:14

mrdeleon

6456 silver badges15 bronze badges

Collectives™ on Stack Overflow

Angular UI-Router resetting querystring params on reload

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related