Angular ui-router: default state with dynamic parameter

Question

I defined a dynamic state with a given parameter from an a-Tag.

Template:

<a ui-sref-active="active" ui-sref=".item({ itemId: item.Id })">

State definition:

        .state('home.item', {
        url: '/{itemId}',
        component: 'item',
        resolve: {
            item: function(items, $stateParams) {
                return items.find(function(item) { 
                    return item.Id === $stateParams.itemId;
                });
            }           
        }   
    })

In the template theres a ng-repeat which generates a navigation structure. I just want to activate the first link with:

$urlRouterProvider.otherwise(/welcome/{item.Id})

The IDs of the Elements are changing so i cannot hard-code this and i need to get the dynamic value of the first link. Since i dont click anything on load, the state does not know the ID-parameter of the first element an therefore does not select the correct state.

Can anyone help?

Leguest · Accepted Answer · 2017-04-25 20:11:47Z

1

I think you can try this:

 $urlRouterProvider.otherwise('/welcome/')

I assume it should home state, parent of home.item

And in controller of home state you can check:

   var resolvedId; // set that dynamic id in home controller

   if(!$stateParams.id) {
      $state.go('home.item', {id: resolvedId});
   }

Here is my JSFiddle demo

edited Apr 25, 2017 at 20:11

answered Apr 25, 2017 at 20:01

Leguest

2,1372 gold badges18 silver badges20 bronze badges

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

Collectives™ on Stack Overflow

Angular ui-router: default state with dynamic parameter

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related