Angular ng:options example

by dandoyon

HTML

<script src="http://docs.angularjs.org/angular-0.9.18.min.js" ng:autobind></script> 
<script>
  function MyCntrl(){
    this.colors = [
      {name:'black', shade:'dark'},
      {name:'white', shade:'light'},
      {name:'red', shade:'dark'},
      {name:'blue', shade:'dark'},
      {name:'yellow', shade:'light'}
    ];
    this.color = this.colors[2]; // red
  }
  </script>
  <div ng:controller="MyCntrl">
    <ul>
      <li ng:repeat="color in colors">
        Name: <input name="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 name="color" ng:options="c.name for c in colors"></select><br>

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

    Color grouped by shade:
    <select name="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>