下拉菜单上的 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>

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

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

Answer 1

考虑改用 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 是检测选择标签变化的最佳选择。我只是在那一刻忘记了它。所以也请参考他的回答。美好的一天。

Answer 2

我的解决方案最终只使用了通用 href，但使用了带有 '#/' 前缀的旧 ng-router 声明。例如：而不是使用...

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

尝试使用带有'#/'前缀的href...

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

Answer 3

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

根据这个 SO 问题：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 函数