角ui-sref下降不工作

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

考虑使用ng选项：

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更改是检测select标签中更改的最佳选择。那一刻我就忘了。因此，请参阅他的回答。日安。

Answer 2

我很确定这是因为a标签在选择选项标签中不起作用。

根据这个问题：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 3

我的解决方案最后只使用了一个通用的href，但是使用了带有'#/‘前缀的旧ng路由器声明。例如:代替使用..。

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