Put ui-sref in select / option

Question

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.

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Answer 1

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
  });
}

Put ui-sref in select / option

Sign up