How to set up path paramater in angular and access in the controller?

Question

I am trying to set up route like below :

$stateProvider.state('transactions', {
                url: '/transactions',
                templateUrl: url,
                menu: 'Transactions'
            });

$stateProvider.state('audit', {
                url: '/transactions/:id/audit',
                templateUrl: 'url',
            });

I want user to navigate to audit page using below url:

/transactions/100/audit
/transactions/200/audit

I have a button which has some logic to redirect user to "audit" page but I am confused with how do I set up $state to achieve this?

$scope.redirectToAudit = function () {
                    $state.go('audit', {
                        id: $scope.transactionId
                    });
                }

So when this button is clicked I want to redirect user to this route "/transactions/100/audit" and get transactionId 100 in the controller of audit log page.

var app = angular.module('myApp', []);
app.controller('auditCtrl', function($scope) {
    $scope.transactionId = //retrive transactionId from the path parameter
});

I want to force transaction id in audit URL /transactions/100/auditbecause entire audit page will be working on transaction id only.

How do I set up my $stateProvider to support the URL and functionality I have described above?

Gerald LeRoy · Accepted Answer · 2022-01-24 05:40:07Z

1

Please let me know if this works for you.

$stateProvider.state('transactions', {
    url: '/transactions',
    templateUrl: url,
    menu: 'Transactions'
});

$stateProvider.state('audit', {
    url: '/transactions/{id}/audit',
    templateUrl: 'url',
});

----------------------

var app = angular.module('myApp', []);
app.controller('auditCtrl', function($scope, $stateParams) {
    $scope.transactionId = $stateParams.id;
});
    
----------------------

app.controller('transactionsCtrl', function($scope, $state) {
    $scope.redirectToAudit = function () {
        $state.go('audit', {
            id: $scope.transactionId;
        });
    }
});

edited Jan 24, 2022 at 5:40

answered Jan 23, 2022 at 11:47

Gerald LeRoy

1,2872 gold badges11 silver badges18 bronze badges

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

5 Comments

I Love Stackoverflow Over a year ago

Thanks for the answer but the thing is Transactions page is set to work with this URL : '/transactions'. Cant change that URL

Gerald LeRoy Over a year ago

Roger that. I updated my answer to work with the Transactions page. Please let me know if that doesn't do it. Happy to help you get this working if I can.

I Love Stackoverflow Over a year ago

This is redirecting me to list of transaction page and not on this URL : /transactions/100/audit

Gerald LeRoy Over a year ago

I updated the code above, which is working in my local environment. Please let me know if this still isn't working in your environment. If it's not working, I'd be happy to screen share, Zoom, etc. this week to take a look your environment and help debug.

I Love Stackoverflow Over a year ago

Working fine now. Thank you so much. Appreciate your help :)

Collectives™ on Stack Overflow

How to set up path paramater in angular and access in the controller?

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related