Question

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

<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>

当我选择其中一个下拉列表时，它不会加载我正在引用的视图。我哪里错了？我也试过这个：

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

Answer 1

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

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

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

类似的东西：

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

您的控制器可能如下所示：

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函数的资源

Answer 2

考虑使用ng-options代替：

myApp.controller('MainController', ['$scope', '$state', function($scope, $state) {    
$scope.options = [
  { label: 'Cash', value: 'cash' },
  { label: 'Cheque', value: 'cheque' },
  { label: 'Debit', value: 'debit' },
  { label: 'Credit', value: 'credit' }
];
$scope.$watch('tt', function(value) {
  if(value) {
    $state.go(value);
  }
});
}]);

HTML：

<div ng-controller="MainController">
  <select class="form-control" id="transactiontype" ng-model="tt" ng-options="opt.value as opt.label for opt in options">
  </select>
</div>

编辑：同意@Likwid_T所说的，我认为ng-change是检测select标签变化的最佳选择。那一刻我忘记了。所以请参考他的回答。美好的一天。

Answer 3

我的解决方案最终只使用了一个通用的href，但是使用旧的ng-router声明和＆＃39;＃/＆＃39;字首。例如：而不是使用...

<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>

尝试使用＆＃39;＃/＆＃39;像这样的前缀......

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

下拉列表中的Angular ui-sref不起作用

3 个答案: