mrkibzk mrkibzk - 8 months ago 68
AngularJS Question

Put ui-sref in select / option

I am using AngularJS and I want to use ui-sref in option. This method that I use isn't working

<div class="col-sm-1">
<select style="width: 117px;" ng-model="selectedTeam">
<option selected disabled>Teams</option>
<option ng-repeat="x in teams" value="{{x.team_id}}">
<a ui-sref="player-statistic.player-statistic-account({ teamId: x.team_id })">
{{x.team_name}}
</a>
</option>
</select>
</div>
<div class="col-sm-1" ng-show="selectedTeam">
<select style="width: 117px;">
<option selected disabled>Account</option>
<option ng-repeat="y in account" ng-if="y.team_id == selectedTeam">
{{y.first_name}} {{y.last_name}}
</option>
</select>
</div>


Depending on which option you choose, this link opens by id.

Answer Source

tags doesn't work inside select's option tag. You can do route navigation from controller function, by calling that function on ng-change of select box

<select style="width: 117px;" ng-model="selectedTeam" ng-change="changeLocation(selectedTeam)">
    <option selected disabled>Teams</option>
    <option ng-repeat="x in teams" value="{{x.team_id}}">
      {{x.team_name}}
    </option>
</select>

Code

$scope.changeLocation = function(teamId) {
  $state.go('player-statistic.player-statistic-account', {
    teamId: teamId
  });
}
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download