Is it possible param's values to be an array in angular-ui-router?

Question

I wonder how a parameters values in a state (angular-ui-router) to be an array.

1) State

.state('products-by-category', {
   url: "/rent-designer-category/{price_range:int}",
   params: {
       price_range: { array: true }
   }
})

2) Controller

var urlParams = ['bt',1,150]; 
$state.transitionTo('products-by-category', urlParams, {
    location: true,
    inherit: true,
    relative: $state.$current,
    notify: false
});

3) URL on browser

http://localhost:3000/rent-designer-bags/?price_range=bt&price_range=1&price_range=150

What i want the URL to be is :

http://localhost:3000/rent-designer-bags/?price_range=['bt',1,150]

Any idea how i can achieve this ? Is that possible ?

Possible duplicate of How to pass array to AngularJS app via url using ui.router module — pegla
– pegla, Commented Sep 18, 2017 at 8:02
@pegla .. i think it is a bit different. Can you explain that why it is duplicate ? — Rido
– Rido, Commented Sep 18, 2017 at 8:40

rrd · Accepted Answer · 2017-09-18 10:11:09Z

2

It is as simple as you think:

.state('products-by-category', {
  params: {
    priceRange: null
  }
})

Your code in the controller:

var urlParams = ['bt', 1, 150]; 
$state.go('products-by-category', { priceRange: urlParams });

Don't use transitionTo, as you don't need to. The $state.go() does just fine. Your second argument needed changing, as you have to pass the name of the param you want with the array you had set up as the value for it. You had a third argument to $state.go() which isn't really needed as the options are mostly all default.

You've also written the url for a direct call. You don't really need this, if you're already using the router to move around ($state.go for example). No user is going to be writing in such a url unless they know angularjs/ui-router inside and out and even then it's somewhat unlikely.

Edit: Updating the answer. If you want to access the array on the 'other side', in the controller, you'd access it via $stateParams:

export default class someClass() {
  constructor($stateParams) {
    super(arguments);

    this.priceRange = this.$stateParams.priceRange;
  }
}

edited Sep 18, 2017 at 10:11

answered Sep 18, 2017 at 9:24

rrd

5,9873 gold badges32 silver badges37 bronze badges

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

4 Comments

Rido Over a year ago

I've tried it & it didn't work. it displayed the same url as url above.

rrd Over a year ago

If you're using ui-router, the question still remains, what do you need the url for? A SPA shouldn't need the user to know any url other than the first opening page, everything from there should be handled by ui-router. What are you trying to achieve by wanting/having the array values in the url?

Rido Over a year ago

i want to retrieve data from api with that params

rrd Over a year ago

So in the controller, you'll have several injections into the constructor. One of those will be $stateParams, if you want to access the resolve's data, you can to it via $stateParams.priceRange - that'll be the data you passed via the resolve.

Collectives™ on Stack Overflow

Is it possible param's values to be an array in angular-ui-router?

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related