How to set the value attribute for select options?

by

What you first tried should work, but the HTML is not what we would expect. I added an option to handle the initial “no item selected” case:

<select ng-options="region.code as region.name for region in regions" ng-model="region">
   <option style="display:none" value="">select a region</option>
</select>
<br>selected: {{region}}

The above generates this HTML:

<select ng-options="..." ng-model="region" class="...">
   <option style="display:none" value class>select a region</option>
   <option value="0">Alabama</option>
   <option value="1">Alaska</option>
   <option value="2">American Samoa</option>
</select>

Fiddle

Even though Angular uses numeric integers for the value, the model (i.e., $scope.region) will be set to AL, AK, or AS, as desired. (The numeric value is used by Angular to lookup the correct array entry when an option is selected from the list.)

This may be confusing when first learning how Angular implements its “select” directive.

More Related Contents:

  1. ng-change get new value and original value
  2. key-value pairs in ng-options
  3. Angularjs: ng-options group by
  4. ng-options with disabled rows
  5. ng-options with simple array init
  6. Angularjs ng-options using number for model does not select initial value
  7. Use filter on ng-options to change the value displayed
  8. AngularJS: Service vs provider vs factory
  9. Why does AngularJS include an empty option in select?
  10. AngularJS access parent scope from child controller
  11. AngularJS: ng-model not binding to ng-checked for checkboxes
  12. Filtering by Multiple Specific Model Properties in AngularJS (in OR relationship)
  13. AngularJS: How to make angular load script inside ng-include?
  14. Injecting $scope into an angular service function()
  15. AngularJS: ng-show / ng-hide not working with `{{ }}` interpolation
  16. Angular $scope.$apply vs $timeout as a safe $apply
  17. How do I fix the npm UNMET PEER DEPENDENCY warning?
  18. Preserve line breaks in angularjs
  19. Using angularjs filter in input element
  20. Click() function isn’t working in protractor scripts
  21. Send FormData with other field in AngularJS
  22. disable nganimate for some elements
  23. How to access/update $rootScope from outside Angular
  24. How to specify headers parameter for custom Angular $resource action
  25. Filter results 6 through 10 of 100 with ng-repeat in AngularJS
  26. Call Angular Function with Jquery
  27. AngularJS – why is $apply required to properly resolve a $q promise?
  28. $sce.trustAsResourceUrl() globally
  29. Auto logout with Angularjs based on idle user
  30. Angularjs – Hide content until DOM loaded

Leave a Comment