angular.js ui-router pass variable to state url

Question

I am trying to pass parameters to a state in angular.js ui-router like the following:

.state('details', {
    url: '/details/:index',
    templateUrl: 'views/details.html'
})

The index is being passed through an ng-repeat index

 <div ng-repeat="program in programs">
            <h2>{{program.name}}</h2>

            <p>{{program.description || "No Description"}}</p>

            <p><a ui-sref="details({index: $index})">View details »</a></p>
 </div>

my question is how in details.html do i read the index passed in the url of the state?

Prashant Pokhriyal · Accepted Answer · 2019-08-28 10:35:35Z

12

Inject $stateParams in your controller.

Example.

var myapp = angular.module('myapp', ["ui.router"])
myapp.config(function($stateProvider, $urlRouterProvider){

  // For any unmatched url, send to /route1
  $urlRouterProvider.otherwise("/route1/2")

  $stateProvider
    .state('route1', {
        url: "/route1/:index",
        templateUrl: "route1.html",
        controller: function($stateParams, $scope) {
            $scope.index = $stateParams.index 
        }
    })
    .state('route2', {
        url: "/route2",
        templateUrl: "route2.html"
    })
});

edited Aug 28, 2019 at 10:35

Prashant Pokhriyal

3,8474 gold badges33 silver badges42 bronze badges

answered Jul 1, 2014 at 19:14

matys84pl

8,3341 gold badge21 silver badges18 bronze badges

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

1 Comment

Fouad Over a year ago

thanks a lot @matys84pl , seems exactly what i have been looking for

Collectives™ on Stack Overflow

angular.js ui-router pass variable to state url

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related