CODEWITHSUNDEEP
angularjsangularjs-directivehtml-select
Steve
Steve

Reputation: 552

AngularJS weird behavior with html <select> tag

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>

Upvotes: 1

Views: 68

Answers (3)

Kishor Velayutham
Kishor Velayutham

Reputation: 818

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.

Upvotes: 1

Arun
Arun

Reputation: 460

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

Upvotes: 0

JB Nizet
JB Nizet

Reputation: 692121

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

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

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

Upvotes: 1

Related Questions