Maintaining parameter values through multiple states using Angular and UI-Router

Question

Maintaining parameter values through multiple states using Angular and UI-Router

I am attempting to create a intricate URL structure:

http://example.com/quote/:param1/:param2/:param3/:param4

With the exception of one, each state utilizes the same template.

My inquiry is whether there exists a method to dynamically transfer each parameter to the subsequent state without necessitating multiple templates? Or should I establish individual templates and only modify the ui-sref?

This is my list of states:

.state('quote', {
    url: '/quote',
    ...
})

.state('quote.policy', {
    url: '/',
    templateUrl: 'partials/quote/quote.select.html',
    page: {next: 'location'}
    ...
})

.state('quote.location', {
    url: '/:policy',
    templateUrl: 'partials/quote/quote.select.html',
    page: {next: 'age'}
    ...
})

.state('quote.age', {
    url: '/:policy/:state',
    templateUrl: 'partials/quote/quote.select.html',
    page: {next: 'income'}
    ...
})

.state('quote.income', {
    url: '/:policy/:state/:age',
    templateUrl: 'partials/quote/quote.income-select.html',
    page: {next: 'priority'}
    ...
})

.state('quote.priority', {
    url: '/:policy/:state/:age/:income',
    templateUrl: 'partials/quote/quote.select.html',
    ... 
})

Every param is acquired through a child state of quote. All of them employ the identical template:

snippet from partials/quote/quote.select.html

<label 
    ng-repeat="option in options[page.type]"
    ui-sref="quote.{{page.next}}({ page.type : option.value })" 
    ng-click="formData.selections[page.type] = option.value">

Another hurdle I am facing is that the existing ui-sref does not transmit the value to the URL, thereby failing to append the new value.

javascript angularjs angular-ui-router

Answer 1

Answer №1

After encountering a similar issue, I took matters into my own hands and successfully solved the problem by pinpointing a few mistakes I was making. The solution has also been improved.

One key realization was that the ui-sref property strangely requires an expression:

<label ui-sref="{{ page.next }}({ {{ page.type }} : option.value })">

This requirement seems logical as you cannot substitute variables directly for a property without utilizing the obj[prop] syntax.

Despite suggestions to nest states one after the other from haxxxton, I opted to keep them at only one level down, such as quote.policy, quote.age, etc. Here is an example of the deepest state I implemented:

.state('quote.show', {
    url: '/:policy/:state/:age/:income/:priority/:i',
    templateUrl: '/partials/quote/quote.show.html',
    controller: 'QuoteController'
})

Pay attention to the URL structure.

To make this setup functional, I had to put some thought into it. Passing every previously selected parameter to the next state proved to be challenging since each state does not have awareness of other states' parameters.

The $stateChangeStart event proved to be helpful (in the parent state controller):

$scope.$on('$stateChangeStart', 
function(event, toState, toParams, fromState, fromParams){
    _.each(fromParams, function(val, key){
        toParams[key] = val;
    })
});

By utilizing this event where both the previous state's params and the upcoming state's params are accessible, I managed to append parameters seamlessly. However, the underscore each method was necessary for extracting the key - if there is a better alternative, feel free to share!

This allowed me to generate a functioning URL like:

http://example.com/#!/quote/Sgl/NSW/31-37/tier3/all/

While it is possible to include keywords for each stage in the URL, e.g.,

http://example.com/quote/policy/Sgl/state/VIC...

by incorporating it in the state definition's URL, I chose to avoid this approach.

Embracing the power of Angular!

Answer 2

After encountering a similar issue, I took matters into my own hands and successfully solved the problem by pinpointing a few mistakes I was making. The solution has also been improved.

One key realization was that the ui-sref property strangely requires an expression:

<label ui-sref="{{ page.next }}({ {{ page.type }} : option.value })">

This requirement seems logical as you cannot substitute variables directly for a property without utilizing the obj[prop] syntax.

Despite suggestions to nest states one after the other from haxxxton, I opted to keep them at only one level down, such as quote.policy, quote.age, etc. Here is an example of the deepest state I implemented:

.state('quote.show', {
    url: '/:policy/:state/:age/:income/:priority/:i',
    templateUrl: '/partials/quote/quote.show.html',
    controller: 'QuoteController'
})

Pay attention to the URL structure.

To make this setup functional, I had to put some thought into it. Passing every previously selected parameter to the next state proved to be challenging since each state does not have awareness of other states' parameters.

The $stateChangeStart event proved to be helpful (in the parent state controller):

$scope.$on('$stateChangeStart', 
function(event, toState, toParams, fromState, fromParams){
    _.each(fromParams, function(val, key){
        toParams[key] = val;
    })
});

By utilizing this event where both the previous state's params and the upcoming state's params are accessible, I managed to append parameters seamlessly. However, the underscore each method was necessary for extracting the key - if there is a better alternative, feel free to share!

This allowed me to generate a functioning URL like:

http://example.com/#!/quote/Sgl/NSW/31-37/tier3/all/

While it is possible to include keywords for each stage in the URL, e.g.,

http://example.com/quote/policy/Sgl/state/VIC...

by incorporating it in the state definition's URL, I chose to avoid this approach.

Embracing the power of Angular!

Maintaining parameter values through multiple states using Angular and UI-Router

Answer №1

Similar questions

setting a callback function as a variable

The function being called within useEffect is rendering too quickly, causing it to break. However, it functions correctly after

Check that a string field includes specific characters and digits using JavaScript

What is the best way to navigate around and close this modal?

After the update to Angular 9, the stopImmediatePropagation function on mat-expansion-panel is no longer functioning as

Tips for addressing the issue - error TS2451: Unable to redefine block-specific variable 'total'

Adding HOST with the sails-mongo adapter: Best practices for seamless integration

Error Detected: the C# script is not compatible with Javascript and is causing

ES6 AngularJS 1: The Power of $inject and Inheritance

What steps should I take to build a TypeScript project (using tsdx) while excluding the source files from the final output?

The onProgress event of the XMLHttpRequest is triggered exclusively upon completion of the file upload

Tips for troubleshooting data saving in a form after clicking the submit button in AngularJS

Validating mandatory fields in C# using Asp.net technology is essential for

Navigating following an AJAX form submission

Uploading and previewing files in Angular

Adjust the output number in a JavaScript BMI calculator to the nearest whole number when using the

redirecting from an AJAX request

An error occurred - 0x800a1391 - JavaScript runtime error: The function 'SelectAllCheckBoxes' has not been defined

Tips for adjusting column positions in a table while maintaining a fixed header and utilizing both horizontal and vertical scrolling

Storing information in MongoDB with Node.js