Using ng-repeat to generate select options (with Demo)

by

This is NOT the correct way to use ng-model with a <select> element in AngularJS:

<!-- ERRONEOUS
<select ng-model="vm.areas">
    <option ng-repeat="area in vm.areas"  ng-value="area" id="{{area}}" ng-click="send_index($event, $index)">{{area.name}}
</select>

<input value="{{variable}}">
-->

There is no need to use the ng-click directive. The select directive handles that automatically. The ng-model directive receives or sets the chosen option.

See:

angular.module('ngrepeatSelect', [])
  .controller('ExampleController', ['$scope', function($scope) {
    $scope.data = {
     model: null,
     availableOptions: [
       {id: '1', name: 'Option A'},
       {id: '2', name: 'Option B'},
       {id: '3', name: 'Option C'}
     ]
    };
 }]);
<script src="https://unpkg.com/angular/angular.js"></script>
<div ng-app="ngrepeatSelect">
  <div ng-controller="ExampleController">
  <form name="myForm">
    <label for="repeatSelect"> Repeat select: </label>
    <select name="repeatSelect" id="repeatSelect" ng-model="data.model">
      <option ng-repeat="option in data.availableOptions" value="{{option.id}}">{{option.name}}</option>
    </select>
  </form>
  <hr>
  <tt>model = {{data.model}}</tt><br/>
</div>

More Related Contents:

  1. How to iterate over the keys and values with ng-repeat in AngularJS?
  2. How to make ng-repeat filter out duplicate results
  3. AngularJS For Loop with Numbers & Ranges
  4. Calculating sum of repeated elements in AngularJS ng-repeat
  5. Difficulty with ng-model, ng-repeat, and inputs
  6. Angular ng-repeat add bootstrap row every 3 or 4 cols
  7. Angular ng-repeat conditional wrap items in element (group items in ng-repeat)
  8. passing 2 $index values within nested ng-repeat
  9. ngModel Formatters and Parsers
  10. ng-repeat filtering data by date range
  11. How to use ng-repeat for dictionaries in AngularJs?
  12. AngularJS: ng-repeat list is not updated when a model element is spliced from the model array
  13. AngularJS – How can I reference the property name within an ng-Repeat
  14. AngularJS : ng-repeat filter when value is greater than
  15. AngularJS Group By Directive without External Dependencies
  16. Angular orderBy number sorting as text in ng-repeat
  17. Using comma as list separator with AngularJS
  18. How to use “ng-repeat” within template of a directive in Angular JS?
  19. AngularJs Remove duplicate elements in ng-repeat
  20. Using ng-if as a switch inside ng-repeat?
  21. Angular bootstrap datepicker date format does not format ng-model value
  22. AngularJS – Filter empty objects
  23. Contenteditable with ng-model doesn’t work
  24. Filtering an Angular 1.2 ng-repeat with “track by” by a boolean property
  25. How to highlight a selected row in ngRepeat?
  26. ng-repeat specify a starting index
  27. angularjs text area character counter
  28. How to obtain previous item in ng-repeat?
  29. Binding inputs to an array of primitives using ngRepeat => uneditable inputs
  30. Highlighting a filtered result in AngularJS

Leave a Comment