Mikaelik
Mikaelik

Reputation: 375

Angular ui-router: default state with dynamic parameter

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?

Upvotes: 1

Views: 785

Answers (1)

Leguest
Leguest

Reputation: 2137

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

Upvotes: 1

Related Questions