angularjs - 下拉菜单中的 Angular ui-sref 不起作用

Question

我有一个带路由的 Angular 应用程序。我有一个下拉选择定义如下:

<select class="form-control" id="transactiontype" ng-model="tt">
    <option><a ui-sref="cash">Cash</a></option>
    <option><a ui-sref="cheque">Cheque</a></option>
    <option><a ui-sref="debitcard">Debit</a></option>
    <option><a ui-sref="creditcard">Credit</a></option>
</select>

当我选择其中一个下拉菜单时，不知何故它没有加载我正在引用的 View 。我哪里出错了？我也试过这个:

<option ui-sref="creditcard">Credit</option>

Answer 1

我很确定这是因为 a 标签在 select - option 标签中不起作用。

根据这个 SO 问题:using href link inside option tag

尝试编写一个函数来重定向页面并根据选择更改或您的模型更改触发它，无论它对您的程序最有利。

就像是:

<select class="form-control" id="transactiontype" ng-model="tt" ng-change="locationChangeFunction()">
...
</select>

您的 Controller 可能如下所示:

angular.module('myApp')
.controller('myController', ['$scope', '$state', function ($scope, $state){

    $scope.locationChangeFunction = function(){
         $state.go($scope.tt);
    }
}]);

编辑

使用两种解决方案的组合(归功于 Hieu TB):

<select class="form-control" id="transactiontype" ng-model="tt" ng-options="opt.value as opt.label for opt in options" ng-change="locationChangeFunction()"></select>

ng-change 将等待模型更改，这将更改 DOM，这将触发更改，现在您没有运行消耗资源的 $watch 函数