10

I need build url like this: /list?filter[status]=1&filter[type]=2

I do:

link:

<a ui-sref="list({filter: {status: 1, type:2}})">List</a>

(pass complex object in params, if pass simple object - {filter: 1} - it ok, but I need this)

state:

.state('list', {
    url:        '/list?filter',
    …
})

In total I get url like:

/list?filter=[object Object]

Demo: http://plnkr.co/edit/wV3ieKyc5WGnjqw42p7y?p=preview

How I can fix it?

Radim Köhler
  • 122,561
  • 47
  • 239
  • 335
Karmazzin
  • 531
  • 3
  • 15
  • 1
    This could be some what duplicate of http://stackoverflow.com/questions/20632255/angularjs-pass-an-object-into-a-state-using-ui-router – Pankaj Parkar Dec 25 '14 at 16:13
  • in your situation you dont need to pass a complex object to ui-sref. filter is not parent of type and status. filter is just a static keyword in url. just pass {type: 1, status: 2} – bahadir Dec 25 '14 at 16:24
  • I think this is better way, passing object params as hidden: http://stackoverflow.com/questions/20632255/angularjs-pass-an-object-into-a-state-using-ui-router – Ganesh Lawande Nov 05 '15 at 15:37

1 Answers1

8

The UI-Router is now shipped with support for custom types of params. There is updated and working version of your plunker.

So, we can adjust the state def like this:

app.config(function($stateProvider) {
  $stateProvider.state('list', {
    url: 'list?{filter:CoolParam}',

As we can see, the filter is now of type CoolParam. Here we will define it:

app.config(['$urlMatcherFactoryProvider', function($urlMatcherFactory) {

  $urlMatcherFactory.type('CoolParam',
  {
     name : 'CoolParam',
     decode: function(val)  { return typeof(val) ==="string" ? JSON.parse(val) : val;},
     encode: function(val)  { return JSON.stringify(val); },
     equals: function(a, b) { return this.is(a) && this.is(b) 
                                  && a.status === b.status && a.type == b.type },
     is: function(val)      { return angular.isObject(val) 
                                  && "status" in val && "type" in val },
  })

}]);

And now the {{$stateParams}} of a link like this:

<a ui-sref="list({filter: {status: 1, type:2}})">Click me to see params</a>

will return:

{"filter":{"status":1,"type":2}}

NOTE: In this case I made my life easier, and simply converted json into string. This means, that url encoded param will look like this:

#/list?filter=%7B%22status%22:1,%22type%22:2%7D

which is {"status":1,"type":2}

But we can provide also other ways how to express our filter object

Check it here

Also related Q & A:

So, the above solution is nicely working with filter as a JSON. But in case that we must have url like this ?filter[status]=1&filter[type]=2, we have to define the state differently. Each parameter must be declared as a separated simple type

$stateProvider.state('list2', {
    url: 'list2?state&type',
})

But in this case we would have it like this ?status=1&type=2. This mapping is also part of this plunker.

Community
  • 1
  • 1
Radim Köhler
  • 122,561
  • 47
  • 239
  • 335