angular.module.ng.$compileProvider.directive.select

Description

HTML SELECT element with angular data-binding.

ngOptions

Optionally ngOptions attribute can be used to dynamically generate a list of <option> elements for a <select> element using an array or an object obtained by evaluating the ngOptions expression. ˝˝ When an item in the select menu is select, the value of array element or object property represented by the selected option will be bound to the model identified by the ngModel directive of the parent select element.

Optionally, a single hard-coded <option> element, with the value set to an empty string, can be nested into the <select> element. This element will then represent null or "not selected" option. See example below for demonstration.

Note: ngOptions provides iterator facility for <option> element which must be used instead of ngRepeat. ngRepeat is not suitable for use with <option> element because of the following reasons:

Usage

as element (see IE restrictions)
<select
       name="{string}"
       [required]
       [ngOptions="{comprehension_expression}"]>
</select>

Parameters

Example

  <script>
  function MyCntrl($scope) {
    $scope.colors = [
      {name:'black', shade:'dark'},
      {name:'white', shade:'light'},
      {name:'red', shade:'dark'},
      {name:'blue', shade:'dark'},
      {name:'yellow', shade:'light'}
    ];
    $scope.color = $scope.colors[2]; // red
  }
  </script>
  <div ng-controller="MyCntrl">
    <ul>
      <li ng-repeat="color in colors">
        Name: <input ng-model="color.name">
        [<a href ng-click="colors.$remove(color)">X</a>]
      </li>
      <li>
        [<a href ng-click="colors.push({})">add</a>]
      </li>
    </ul>
    <hr/>
    Color (null not allowed):
    <select ng-model="color" ng-options="c.name for c in colors"></select><br>

    Color (null allowed):
    <div  class="nullable">
      <select ng-model="color" ng-options="c.name for c in colors">
        <option value="">-- chose color --</option>
      </select>
    </div><br/>

    Color grouped by shade:
    <select ng-model="color" ng-options="c.name group by c.shade for c in colors">
    </select><br/>


    Select <a href ng-click="color={name:'not in list'}">bogus</a>.<br>
    <hr/>
    Currently selected: {{ {selected_color:color}  }}
    <div style="border:solid 1px black; height:20px"
         ng-style="{'background-color':color.name}">
    </div>
  </div>
   it('should check ng-options', function() {
     expect(binding('{selected_color:color}')).toMatch('red');
     select('color').option('0');
     expect(binding('{selected_color:color}')).toMatch('black');
     using('.nullable').select('color').option('');
     expect(binding('{selected_color:color}')).toMatch('null');
   });