AngularJS weird behavior with html <select> tag

Question

I am new AngularJS framework. I have few questions related to use of <select> tag in angularjs.

Firstly, whenever I am putting the first value of the option in the <select> tag, it shows an extra blank option in the drop down. Then, when I select any of the options in the dropdown, it disappears.

Secondly, whenever I am keeping any of the options blank, then it behaves normally.

Why is it happening.?

Here's the code:

<html>
  <head>
    <title>AngularJS Binding</title>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.js"></script>

  </head>

  <body ng-app="app">

    <div>
        Search 1: <select ng-model="optval1" >
                  <option value="any">Any</option> 
                  <option value="name">Name</option>
                  <option value="city" selected>City</option>
                </select>
              <br>
        Selected Value={{optval1}}<br><br>
        Search 2: <select ng-model="optval2" >
                  <option value="">Any</option> 
                  <option value="Name">Name</option>
                  <option value="City">City</option>
      >          </select>
              <br>
        Selected Value={{optval2}}
    </div>
  </body>
 </html>

Kishor Velayutham · Accepted Answer · 2018-03-11 15:03:12Z

You can use ng-init to load the initial value.

<select ng-model="optval1" ng-init="optval1='any'">
                  <option value="any">Any</option> 
                  <option value="name">Name</option>
                  <option value="city">City</option>

</select>

If you don't want to use initial value using ng-init.

use ng-show/ng-if.

<select ng-model="optval1">
    <option value="" ng-if="false"></option>
    <option value="any">Any</option> 
    <option value="name">Name</option>
    <option value="city">City</option>
</select>

You can also hard-coded style element to the first dropdown value.

For ex:

<select ng-model="optval1">
       <option style="display:none" value="">select</option>
       <option value="any">Any</option> 
        <option value="name">Name</option>
        <option value="city">City</option>
</select>

Does the same thing like ng-if/ng-show.

Hope this solves your problem and informative as well.

JB Nizet · Accepted Answer · 2018-03-11 11:16:37Z

1

It's happening because you're providing incoherent, contradicting information to the framework. The select is bound to optval, so it's the value of optval that tells Angular which of the options must be selected (your selected attribute is completely useless, and once again, contradictory).

You're saying that the only possible values of optval1 are "any", "name" and "city".
But the optval value is not any of those values.

So AngularJS has to do something to compensate, and it adds a blank option.

answered Mar 11, 2018 at 11:16

JB Nizet

694k94 gold badges1.3k silver badges1.3k bronze badges

Comments

Arun · Accepted Answer · 2018-03-11 13:06:35Z

0

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">

    <div>
        Search 1: <select  ng-model="optval1">
                  <option value="any">Any</option> 
                  <option value="name">Name</option>
                  <option value="city">City</option>
                </select>
              <br>
        Selected Value={{optval1}}<br><br>
        Search 2: <select ng-model="optval2" >
                  <option value="">Any</option> 
                  <option value="Name">Name</option>
                  <option value="City">City</option>
      >          </select>
              <br>
        Selected Value={{optval2}}
    </div>

</div>
</body>
</html>



<script>
var myApp = angular.module("myApp",[]);

myApp.controller('myCtrl', function($scope) {

$scope.optval1 = "city";

});

</script>

please find below code

edited Mar 11, 2018 at 13:06

answered Mar 11, 2018 at 12:39

Arun

4603 silver badges8 bronze badges

2 Comments

JB Nizet Over a year ago

ng-init should almost never be used. This is clearly specified in the documentation. Please don't encourage its usage. The controller should initialize variables. Not the view.

Arun Over a year ago

In that case we can assign the default value of ng-model="optval1" during controller load

Collectives™ on Stack Overflow

AngularJS weird behavior with html <select> tag

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related