Podcast/lib/angular/docs/partials/api/ng.directive:select.html

<h1><code ng:non-bindable="">select</code>
<span class="hint">(directive in module <code ng:non-bindable="">ng</code>
)</span>
</h1>
<div><h2 id="Description">Description</h2>
<div class="description"><p>HTML <code>SELECT</code> element with angular data-binding.</p>

<h3><code>ngOptions</code></h3>

<p>Optionally <code>ngOptions</code> attribute can be used to dynamically generate a list of <code>&lt;option&gt;</code>
elements for a <code>&lt;select&gt;</code> element using an array or an object obtained by evaluating the
<code>ngOptions</code> 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 <code>ngModel</code>
directive of the parent select element.</p>

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

<p>Note: <code>ngOptions</code> provides iterator facility for <code>&lt;option&gt;</code> element which should be used instead
of <a href="api/ng.directive:ngRepeat"><code>ngRepeat</code></a> when you want the
<code>select</code> model to be bound to a non-string value. This is because an option element can currently
be bound to string values only.</p></div>
<h2 id="Usage">Usage</h2>
<div class="usage">as element (see <a href="guide/ie">IE restrictions</a>)<pre class="prettyprint linenums">&lt;select
       name="{string}"
       [required]
       [ngRequired="{string}"]
       [ngOptions="{comprehension_expression}"]&gt;
&lt;/select&gt;</pre>
<h3 id="Parameters">Parameters</h3>
<ul class="parameters"><li><code ng:non-bindable="">name – {string} – </code>
<p>assignable expression to data-bind to.</p></li>
<li><code ng:non-bindable="">required<i>(optional)</i> – {string=} – </code>
<p>The control is considered valid only if value is entered.</p></li>
<li><code ng:non-bindable="">ngRequired<i>(optional)</i> – {string=} – </code>
<p>Adds <code>required</code> attribute and <code>required</code> validation constraint to
the element when the ngRequired expression evaluates to true. Use <code>ngRequired</code> instead of
<code>required</code> when you want to data-bind to the <code>required</code> attribute.</p></li>
<li><code ng:non-bindable="">ngOptions<i>(optional)</i> – {comprehension_expression=} – </code>
<p>in one of the following forms:</p>

<ul>
<li>for array data sources:
<ul><li><code>label</code> <strong><code>for</code></strong> <code>value</code> <strong><code>in</code></strong> <code>array</code></li>
<li><code>select</code> <strong><code>as</code></strong> <code>label</code> <strong><code>for</code></strong> <code>value</code> <strong><code>in</code></strong> <code>array</code></li>
<li><code>label</code>  <strong><code>group by</code></strong> <code>group</code> <strong><code>for</code></strong> <code>value</code> <strong><code>in</code></strong> <code>array</code></li>
<li><code>select</code> <strong><code>as</code></strong> <code>label</code> <strong><code>group by</code></strong> <code>group</code> <strong><code>for</code></strong> <code>value</code> <strong><code>in</code></strong> <code>array</code></li></ul></li>
<li>for object data sources:
<ul><li><code>label</code> <strong><code>for (</code></strong><code>key</code> <strong><code>,</code></strong> <code>value</code><strong><code>) in</code></strong> <code>object</code></li>
<li><code>select</code> <strong><code>as</code></strong> <code>label</code> <strong><code>for (</code></strong><code>key</code> <strong><code>,</code></strong> <code>value</code><strong><code>) in</code></strong> <code>object</code></li>
<li><code>label</code> <strong><code>group by</code></strong> <code>group</code> <strong><code>for (</code></strong><code>key</code><strong><code>,</code></strong> <code>value</code><strong><code>) in</code></strong> <code>object</code></li>
<li><code>select</code> <strong><code>as</code></strong> <code>label</code> <strong><code>group by</code></strong> <code>group</code>
<strong><code>for</code> <code>(</code></strong><code>key</code><strong><code>,</code></strong> <code>value</code><strong><code>) in</code></strong> <code>object</code></li></ul></li>
</ul>

<p>Where:</p>

<ul>
<li><code>array</code> / <code>object</code>: an expression which evaluates to an array / object to iterate over.</li>
<li><code>value</code>: local variable which will refer to each item in the <code>array</code> or each property value
 of <code>object</code> during iteration.</li>
<li><code>key</code>: local variable which will refer to a property name in <code>object</code> during iteration.</li>
<li><code>label</code>: The result of this expression will be the label for <code>&lt;option&gt;</code> element. The
<code>expression</code> will most likely refer to the <code>value</code> variable (e.g. <code>value.propertyName</code>).</li>
<li><code>select</code>: The result of this expression will be bound to the model of the parent <code>&lt;select&gt;</code>
 element. If not specified, <code>select</code> expression will default to <code>value</code>.</li>
<li><code>group</code>: The result of this expression will be used to group options using the <code>&lt;optgroup&gt;</code>
 DOM element.</li>
</ul></li>
</ul>
</div>
<h2 id="Example">Example</h2>
<div class="example"><h4>Source</h4>
<div source-edit="" source-edit-deps="angular.js script.js" source-edit-html="index.html-190" source-edit-css="" source-edit-js="script.js-189" source-edit-unit="" source-edit-scenario="scenario.js-191"></div>
<div class="tabbable"><div class="tab-pane" title="index.html">
<pre class="prettyprint linenums" ng-set-text="index.html-190" ng-html-wrap=" angular.js script.js"></pre>
<script type="text/ng-template" id="index.html-190">
  
  <div ng-controller="MyCntrl">
    <ul>
      <li ng-repeat="color in colors">
        Name: <input ng-model="color.name">
        [<a href ng-click="colors.splice($index, 1)">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):
    <span  class="nullable">
      <select ng-model="color" ng-options="c.name for c in colors">
        <option value="">-- chose color --</option>
      </select>
    </span><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>
</script>
</div>
<div class="tab-pane" title="script.js">
<pre class="prettyprint linenums" ng-set-text="script.js-189"></pre>
<script type="text/ng-template" id="script.js-189">
  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>
<div class="tab-pane" title="End to end test">
<pre class="prettyprint linenums" ng-set-text="scenario.js-191"></pre>
<script type="text/ng-template" id="scenario.js-191">
   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');
   });
</script>
</div>
</div><h4>Demo</h4>
<div class="well doc-example-live" ng-embed-app="" ng-set-html="index.html-190" ng-eval-javascript="script.js-189"></div></div>
</div>