current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Dismiss
Announcing Stack Overflow Documentation

We started with Q&A. Technical documentation is next, and we need your help.

Whether you're a beginner or an experienced developer, you can contribute.

Sign up and start helping → Learn more about Documentation →
up vote 1 down vote favorite

I need to construct a state url based on an object. Basically I want this state:

{
  id: 1,
  f: {
    "5": [
      "1",
      "7"
    ],
    "7": [
      "3",
      "6"
    ]
  }
}

To be transformed into this url:

http://localhost/resource/1?f[5][]=1&f[5][]=7&f[7][]=3&f[7][]=6

How do I specify such a url pattern with the ui-router config and how do I transition to that state?

Edit: I wasn't really clear on how or why I wanted this.

The main idea is to create a filter for some data on a page. I'd like the users to be able to bookmark the page with their filters applied.

The specific format of the url is nothing I invented, it's the standard way to provide arrays in query parameters for PHP. PHP parses the query with parse_str(), like this:

php > parse_str('f[5][]=1&f[5][]=7&f[7][]=3&f[7][]=6', $arr);
php > var_dump($arr);
array(1) {
  ["f"]=>
  array(2) {
    [5]=>
    array(2) {
      [0]=>
      string(1) "1"
      [1]=>
      string(1) "7"
    }
    [7]=>
    array(2) {
      [0]=>
      string(1) "3"
      [1]=>
      string(1) "6"
    }
  }
}

What I want to do is to call $state.go() with my filter parameters (something like the state object above) and make ui-router change the url and state to those parameters on this specific url format.

I'm open to suggestions if there is a better way to do this.

share|improve this question
    
I actually didn't get this use case but first i'm curious about why you need this url. – Okazari Jun 9 '15 at 10:21
    
I guess you're trying to pass some 2D array kinda parameters. And seems like query string parameters aren't the best way to do so. Why not store this stuff in some service, and access them in the target controller .. – Manish Kr. Shukla Jun 9 '15 at 10:27
    
I need to pass these query parameters to my backend, so this is actually the url I'm using to fetch json/html from my server. I'd like to enable users to bookmark the page. The specific format is needed because it's the way PHP interprets array parameters in queries. I guess I could create my own format and parse that on the server, but that seems cumbersome if I can get an answer to this question. – Lars Nyström Jun 9 '15 at 10:57
up vote 1 down vote

I am not sure why you would want your data to be sent along with url (you should use a service instead). But here's how you send parameters with the url to switch to different state. The 'parameter' below is the object you need to send:

In your controller which holds the object:

$scope.parameter = {//whatever object you want
};

In your routes:

app.config(function config($stateProvider) {
    $stateProvider.state("example",{
        url: "fooURL/bar=:parameter",
        controller: "FooCtrl as foo",
        templateUrl: "templates/foo.html"
    })
})

In your HTML from which you want to redirect:

<div ui-sref="example({bar: parameter})">

The controller which handles the new redirected state:

app.controller('FooCtrl', ['$scope', '$stateParams', function($scope, $stateParams) {
    $scope.bar = $stateParams.bar;
}])

I am sure you can tweak the code to your requirements.

share|improve this answer
    
I'm sorry I was unclear, I updated the question to clarify why I want to do this. Can you provide an example with $state.go()? – Lars Nyström Jun 9 '15 at 11:19
    
sorry haven't used $state.go() – Tarun Dugar Jun 9 '15 at 12:54
up vote 1 down vote

Use the "json" param type which encodes objects as json, or make a custom param type which encodes the way you describe. 

.state("foo", { url: "/foo?{queryParam:json}" });

Or

var customType = {
  encode: encodeFn,
  decode: decodeFn
}
    $urlMatcherFactoryProvider.type("phpQuery", customType);

    .state("foo", { url: "/foo?{queryParam:phpQuery}" });
share|improve this answer
    
This seems like what I want to do. I have to prioritize some other things, but then I'll get back to this answer and try it out. Thank you! – Lars Nyström Jun 11 '15 at 14:17
    
Sadly the parameter type provider doesn't seem to work for me, since it can only manipulate the value of the parameter and I also need to manipulate the key. I'll use json instead, since that's simple enough. – Lars Nyström Jun 16 '15 at 8:56

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.