AngularJS ngOptions

AngularJS ngOptions.md

Try out ng-options inside <select>

fiddle.html

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.js"></script>
<div ng-app="myapp" ng-controller="parentCtrl">
  <p>Use `for` and `track by`</p>
  <select ng-options="option.name for option in options track by option.id" ng-model="selectedOptionObj">
  </select>
  <br/>
  Selected: {{selectedOptionObj}} <br/>
  <!-- It produces the following
    <option value="{option.id}" label="{option.name}">{option.name}</option>
    ...
    ngModel:selectedOptionObj is the selected child of `options`. It's always an object.
    If initial value of selectedOption is not a child of `options`, an empty `<option>` will be created
    <option value="?" selected="selected" label></option>
    So it's better to define your own empty `<option>`, see below
  -->
  
  <p>Use `for` and `track by` and sepecify an empty option </p>
  <select ng-options="option.name for option in options track by option.id" ng-model="selectedOptionObj">
    <option value>Choose an option</option>
  </select>
  Selected: {{selectedOptionObj}} <br/>
  
  <p>Don't use `as` together with `track by`</p>
  <select ng-options="option.id as option.name for option in options track by option.id" ng-model="selectedOptionObj">
  </select>
  Selected: {{selectedOptionObj}} <br/>
  <!-- ngModel:selectedOption is option.id. Initial selection will be messed up -->
  
  <p>ngOptions can't insert custom attributes, it's time to go back to ngRepeat </p>
  <select ng-model="selectedOptionID">
    <!-- You can define `not selected` option here or inside `ng-repeat` -->
    <!-- `not selected` is required otherwise AngularJS will create weird empty option -->
    <option value="">Not selected</option>
    <option ng-repeat="option in options" data-image="{{option.dataImage}}" 
            value="{{option.id}}" ng-selected="selectedOptionID == option.id">
      {{option.name}}
    </option>
  </select>
  <br />
  Selected: {{selectedOptionID}}
</div>

fiddle.js

var app=angular.module('myapp',[]);
app.controller('parentCtrl',function($scope) {
  $scope.options = [ 
    {name: 'name1', id:1, dataImage: '1.png'},
    {name: 'name2', id:2, dataImage: '2.png'}
  ];
  $scope.selectedOptionObj = $scope.options[1];
  $scope.selectedOptionID = 2;
});

fiddle.manifest

normalize_css: no
panel_jss: 0
panel_css: 0
wrap: b