AngularJS选择下拉菜单-选择默认选项

Question

我有AngluarJs下拉列表，每个“ onchange”选项都将导航到另一个页面。 这是代码：

   <select class="qtDropDown" 
           ng-model="Suggested" 
           ng-change="changeOption()" 
           ng-options="option.name for option in suggested">

JS。

     $scope.suggested = StrategyService.getPredefinedStrategies();
     $scope.Suggested = $scope.suggested[0];

     $scope.changeOption = function () {
        var selectedStrategy = $scope.Suggested;
        var queryString = selectedStrategy.name.split(' ').join(''); 
        window.location.href(baseUrl+queryString);
     };       

问题是当我单击默认选择$scope.suggested[0]; 它不是在导航用户。 有人可以建议我在哪里做错吗？

Answer 1

这很正常，因为当您选择$ scope.suggested [0]时，如果没有更改，则没有更改。

一种防止这种情况的方法是添加空白选项

<select class="qtDropDown" ng-model="Suggested" ng-change="changeOption()" 
ng-options="option.name for option in suggested">
    <option value=""> - Choose one of the following - </option>
</select>

这样，当您选择$ scope.suggested [0]时，将触发更改。

Answer 2

只需在您的javascript中触发changeOption函数即可：)

您选择的是默认选项，但是具有更改值时需要触发的功能..所以只需将代码修改为：

     $scope.suggested = StrategyService.getPredefinedStrategies();

     $scope.changeOption = function () {
        var selectedStrategy = $scope.Suggested;
        var queryString = selectedStrategy.name.split(' ').join(''); 
        window.location.href(baseUrl+queryString);
     };     
     $scope.Suggested = $scope.suggested[0];
     $scope.changeOption(); // this will trigger the change of the default value

Answer 3

<select name="qtDropDown" id="qtDropDown">
<option value="url">...</option>

var urlmenu = document.getElementById( 'Select' );
urlmenu.onchange = function() {
window.open(  this.options[ this.selectedIndex ].value );
};

使用angular js，在div标签中添加ng-model。