Angularjs passing different lenght values as stateParams

Question

I am trying to pass different lengths of values to the same state:

For example

<li href="#/app/list/value1">

<li href="#/app/list/value1/value2">

In my state I have the following

.state('app.list', {
  url: "/list/:passedLow/:passedHigh",
  views: {
    'menuContent': {
      templateUrl: "templates/file.html",
      controller: 'ValueListCtrl'
    }
  }
})

Also I have

 $urlRouterProvider.otherwise('/app/landing');

so when I click on the second link (i.e, pass two values) everything works fine. But when I pass the one with the single value "otherwise" takes over and redirects me to the landing page.

So how can I pass variable length values as $stateParams?

I hope you will find the answer here [assigning multiple route names][1] [1]: http://stackoverflow.com/questions/19516771/state-go-toparams-not-passed-to-stateparams — forgottofly, May 06 '15 at 04:07
look in the docs...can use wildcards so if a param isn't there it ignores it — charlietfl, May 06 '15 at 04:09

Radim Köhler · Answer 1 · 2015-05-06T10:03:32.953

There is a working plunker

The solution here is to use params: {} to define more details about our parameter:

params : { passedHigh : { value : null, squash : true } },

What we can see, that we instruct UI-Router to expect that there will be param passedHigh. Default value is null (could be adjusted). And we say, that it will be skipped (if default) in url - squash: true

Doc: $stateProvider

There is a complete state definition

.state('app', {
    url: "/app",
    templateUrl: 'tpl.html',
})
.state('app.list', {
    url: "/list/:passedLow/:passedHigh",
    views: {
        'menuContent': {
            templateUrl: "templates/file.html",
            controller: 'ValueListCtrl'
        }
    },
    params: {
        passedHigh: {
            value: null,
            squash: true
        }
    },
})
.state('app.landing', {
    url: "/landing",
    templateUrl: 'tpl.html',
})

check it here in action

Angularjs passing different lenght values as stateParams

1 Answers1