Passing various length values in AngularJS using stateParams

Question

Passing various length values in AngularJS using stateParams

I am facing an issue with passing values of different lengths to the same state:

For instance

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

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

Within my state definition, I have the following

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

Additionally, I am using

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

When I click on the second link (i.e., passing two values), everything works as expected. However, when I try to pass a single value, the "otherwise" rule kicks in and redirects me to the landing page.

Is there a way to handle passing variable length values as $stateParams?

javascript angularjs angular-ui-router

Answer 1

Answer №1

For a functional plunker, visit this link

To provide more details about a parameter, utilize params: {} and specify the parameter as follows:

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

This setup informs UI-Router to anticipate the presence of the passedHigh parameter. The default value is null and can be modified if needed. Additionally, we indicate that it should be omitted from the url if it remains at the default value - squash: true

Further information can be found in the $stateProvider documentation

Below 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',
})

View it in action here

Answer 2

For a functional plunker, visit this link

To provide more details about a parameter, utilize params: {} and specify the parameter as follows:

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

This setup informs UI-Router to anticipate the presence of the passedHigh parameter. The default value is null and can be modified if needed. Additionally, we indicate that it should be omitted from the url if it remains at the default value - squash: true

Further information can be found in the $stateProvider documentation

Below 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',
})

View it in action here

Passing various length values in AngularJS using stateParams

Answer №1

Similar questions

How can I create a computed field in TypeORM by deriving its value from other fields within the same Entity?

Using React to Filter cards according to the selected value from an Autocomplete feature

Using Event Delegation in Practice

Designing a Dynamic Floating Element that Shifts with Scroll Movement

After the child promise is resolved, have the parent function return a boolean value

Troubleshooting Firefox HTML Positioning Problem (Functioning Properly in IE and Chrome)

Utilizing a dynamically created Stripe checkout button

Display a loading progress bar with jQuery AJAX as your single page website content loads

Updating React state by changing the value of a specific key

What is the purpose of adding "/dist" to the library import statement?

Modifying script variables using the Chrome console

Unusual Behavior of JavaScript for..in and enum

When utilizing Next.js, the router.push feature will automatically scroll the page to the top, even if the scroll option

Loading jQuery on Ajax can be a challenge

Troubleshooting the Thinkster MEAN Stack tutorial: Failure to Generate User Input via POST Method

Observables and the categorization of response data

Update the CSS styling for elements that are dynamically added to the page using the

Issue with Internet Explorer: Refusing to run javascript included in AJAX-loaded content

Navigating with buttons in the Material UI Drawer

Deactivate web security for JavaScript with Watir