3

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="bootstrap-css@3.3.6" 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="angular.js@1.4.8" 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

Zelter Ady
  • 6,266
  • 12
  • 48
  • 75
  • 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 Mar 05 '18 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 Mar 05 '18 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 Mar 05 '18 at 15:00
  • 1
    Possible duplicate of [Update Angular model after setting input value with jQuery](https://stackoverflow.com/questions/17109850/update-angular-model-after-setting-input-value-with-jquery) – Tyler Mar 05 '18 at 15:04

1 Answers1

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

Matias Fernandez Martinez
  • 1,877
  • 13
  • 15
  • Thank you for your answer. Can you explain why? – Zelter Ady Mar 05 '18 at 15:30
  • 1
    When using ngOptions, the directive supports only one `` 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. – Matias Fernandez Martinez Mar 06 '18 at 18:02
  • 2
    There is a mistake here. `value="state"` should be `value="{{state}}" otherwise all the options would have a value of the literal string 'state' – Paul Kruger Aug 19 '19 at 07:20