angularjs select option with value

Question

I would like to create in angular (1.0) an select list with a default option who has value. I don't understand why, but when I add a value to default option, it is not rendered proper. My code is this:

<!DOCTYPE html>
<html ng-app="myApp">

<head>
  <link data-require="[email protected]" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
  <script data-require="jquery@*" data-semver="2.1.4" src="https://code.jquery.com/jquery-2.1.4.js"></script>
  <script data-require="bootstrap@*" data-semver="3.3.6" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <script data-require="[email protected]" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body ng-controller="myController">
  <h1>States in India</h1>
  <select ng-options="state for state in states" ng-model="selectedState">
    <option value="">-- choose --</option>
  </select>

  <br/>
  <br/>
  <h1>States in India - not working proper (default option not displayed)</h1>
  <select ng-options="state for state in states" ng-model="selectedState">
    <option value="not_empty">-- choose --</option>
  </select>
</body>

</html>

Can someone help me to understand this behavior? Why when I add the value attribute to default options it is no longer added to select?

Later edit: The issue I'd like to clarify is not about model, but about option element with not empty value:

<option value="not_empty">-- choose --</option>

I don't understand why this option is not rendered! If I add

<option value="">-- choose --</option>

then it appears (is rendered) inside drop down element! Plunker here: http://plnkr.co/edit/YDGodWKRqMROXjgEGXd2?p=preview

what is in script.js? without seeing it its hard to determine the cause, however, this is just a guess, but if you add options though javascript it might be overwritting your value? Also you have the same model name for both selects — John Kane
– John Kane, Commented Mar 5, 2018 at 14:45
What does "states" look like? Is it an object, array of objects, array of strings, etc.? Your default value must be the same type as your option values. — jbrown
– jbrown, Commented Mar 5, 2018 at 14:48
May be because empty string is considered as default value for default(???) I have tried this with different possibilities and the default will only displayed if the value is empty. — Bharadwaj
– Bharadwaj, Commented Mar 5, 2018 at 15:00
Possible duplicate of Update Angular model after setting input value with jQuery — Tyler
– Tyler, Commented Mar 5, 2018 at 15:04

Matias Fernandez Martinez · Accepted Answer · 2019-08-19 07:25:55Z

3

If you choose to use ng-options you cant't add the default option with html, you need to bind the ngModel to one of the options:

<select ng-options="state.name for state in states" ng-model="selected">
</select>

This is a working example

If you want a message saying "Select State" you should use ng-repeat on the option tag:

<select ng-model="$ctrl.otherSelect">
  <option value="{{someValue}}">Select State</option>
  <option ng-repeat="state in states" value="state">{{state}}</option> 
</select>

Update: Fixed binding on value attribute

edited Aug 19, 2019 at 7:25

answered Mar 5, 2018 at 15:23

Matias Fernandez Martinez

1,88513 silver badges15 bronze badges

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

3 Comments

Zelter Ady Over a year ago

Thank you for your answer. Can you explain why?

Matias Fernandez Martinez Over a year ago

When using ngOptions, the directive supports only one <option> tag with an empty string as value: <option value="">-- choose color --</option> and if is placed it will be taken as selected value. Is just how is design to work, if you want to have a default value selected use the ngModel instead of harcoding the value on the template. Or use the fix value on the template with ng-repeat on the options.

Paul Kruger Over a year ago

There is a mistake here. value="state" should be `value="{{state}}" otherwise all the options would have a value of the literal string 'state'

Collectives™ on Stack Overflow

angularjs select option with value

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related