CODEWITHSUNDEEP
angularjsangular-ui-router
user3800799
user3800799

Reputation: 538

Angular ui.router dynamic ui-sref

I have an app with 2 states:

I have a link that repeats in my whole app:

<a ui-sref="profile({id:profile.id})" ui-sref-active="active">Current state + ID</a>

How can I change the ui-sref to be dynamic? - to represent the current state along with the current stateParam that I want (which is id)

when finding a solution, keep in mind that I want to be abble to use ui-sref-active so I'd rather avoid ng-click on something like this.

Upvotes: 4

Views: 1967

Answers (3)

Huy Chau
Huy Chau

Reputation: 2238

$scope.routers = [
  {
    state: 'profile',
    params: {id: 1}
  },
  {
    state: 'settings',
    params: {id: 1}
  } 
];

View:

<a ng-repeat="router in routers" ui-sref="{{router.state}}(router.params)"></a>

Upvotes: 1

Alvaro Silvino
Alvaro Silvino

Reputation: 9763

I guess the most safe and understandable way is using simple if else:

<div ng-if="checkState == 'profile'">
      <a ui-sref="profile({id:profile.id})" ui-sref-active="active">Current state + ID</a>
</div>

<div ng-if="checkState == 'settings'">
      <a ui-sref="settings({id:profile.id})" ui-sref-active="active">Current state + ID</a>
</div>

sure that will work...

Upvotes: 1

Muhammad Usman
Muhammad Usman

Reputation: 355

I think ui-sref will parse what is inside the ( and ) as an expression.

So all you have to do is this.

<a ng-repeat="step in steps" ui-sref="{{step.state}}(step.param)"></a>

Upvotes: 6

Related Questions