I'd like to pass a search query string to a state. The URL should look like this:

/goods?filters[paramA]=1&filters[paramB]=2

My state setup is the following:

.state('goods', {
            url:        '/goods?filters',
            …
        })

My link template looks like this:

<a ui-sref="goods({ filters: { paramA: 1, paramB: 2}})">Menu item label</a>

However, ui-router does not encode it properly and I get:

/goods?filters=[object Object]

How do I do it properly?

I'd like to pass a search query string to a state. The URL should look like this:

/goods?filters[paramA]=1&filters[paramB]=2

My state setup is the following:

.state('goods', {
            url:        '/goods?filters',
            …
        })

My link template looks like this:

<a ui-sref="goods({ filters: { paramA: 1, paramB: 2}})">Menu item label</a>

However, ui-router does not encode it properly and I get:

/goods?filters=[object Object]

How do I do it properly?

• javascript
• angularjs
• angular-ui-router

• So far I've solved the problem with the ugly JSON-as-a-parameter. It's not nice, but at least readable and can be easily manipulated. – CamaroSS Commented Sep 30, 2014 at 6:27

1 Answer 1

In order to acplish what you are wanting you need to be using $stateParams rather then the query string you are trying to use. (although it is possible to use query strings, it is easier to use the $stateParams)

First you need to assign/registered the params with the state:

$stateProvider
.state('someState', {
    url: "/someLinkPath/:Param1",
    templateUrl: 'stateHTML.html',
    controller: function ($stateParams) {
        console.log($stateParams);
    }
});

Then you can construct a $stateParams object and pass it in the link to desired state.

If you do need to use the query string, then you need to flatten the object being added to the string

You could either use $.param (jQuery):

var yourParams = $.param({ param1: Value1, param2: Value2 });

or write you own vanilla JS function like this :

function toQueryString(obj) {
    var parts = [];
    for (var i in obj) {
        if (obj.hasOwnProperty(i)) {
            parts.push(encodeURIComponent(i) + "=" + encodeURIComponent(obj[i]));
        }
    }
    return parts.join("&");
}

Edit: After thinking about your issue further I believe that the issue is that you have an object wrapper around your params. When you use this:

<a ui-sref="goods({ filters: { paramA: 1, paramB: 2}})">Menu item label</a>

I think that by doing this the ui-sref does not know how to handle an object(filter) with a sub object. what you need to be doing is passing in a single object I think if you can change your code to only pass in the params as an object your code will work.

<a ui-sref="goods({ paramA: 1, paramB: 2})">Menu item label</a>