AngularJS select dropdown - Select default option

Question

I have AngluarJs dropdown, each option "onchange" will take navigate to another page. Here is the code:

   <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);
     };

The Problem here is When I click on the default selection which is $scope.suggested[0]; it is not navigating the user. Can anybody suggest where I am doing the mistake please ?

So you mean, change event doesn't fire unless you change actually options? — dfsq
– dfsq, Commented Oct 21, 2014 at 15:34
Not exactly, the change event is firing if you select any other option not default one which is $scope.suggested[0]. — Aj1
– Aj1, Commented Oct 21, 2014 at 15:39

Doum · Accepted Answer · 2014-10-21 15:28:15Z

2

It's normal as when you select $scope.suggested[0] there is not change has it is your default.

One way to prevent it is by adding a blank option

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

That way, when you will select $scope.suggested[0], there will a change trigerred.

answered Oct 21, 2014 at 15:28

Doum

3973 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Aj1 Over a year ago

Thank you for the suggestion. That's true but, I wanted to have a default option. That's the point. Any way, thank you for the suggestion.

Muhammad Ahsan Ayaz · Accepted Answer · 2014-10-21 20:31:52Z

just trigger the changeOption function in your javascript :)

you are selecting the default option but you have the function that needs to be triggered when the value changes.. so just modify the code to :

     $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

Ramakrishnarao Kasibhatla · Accepted Answer · 2015-05-14 02:22:41Z

0

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

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

with angular js, add ng-model in your div tag.

answered May 14, 2015 at 2:22

Ramakrishnarao Kasibhatla

11 bronze badge

Collectives™ on Stack Overflow

AngularJS select dropdown - Select default option

3 Answers 3

1 Comment

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Related