AngularJS Tutorial - Select a value custom not-displayed option








The following code shows how to select a value with custom not-displayed option.

Example


<!DOCTYPE html>
<html  ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.js"></script>
  <script>
var app = angular.module('myApp', []);
<!--   w  ww  . j a  va 2  s  .  c om-->
app.controller('MainCtrl', function($scope) {
  $scope.letters = ['A', 'B', 'C', 'D','E','F'];
  $scope.letter = undefined;
  $scope.getType = function(item) {
    if ( angular.isDefined(item) ) {
      if ( item === null ) {
        return 'null';
      }
      return typeof item;
    }
    return 'undefined';
  };
});
  
  </script>
</head>
<body ng-controller="MainCtrl">
  
  <select ng-model="letter" ng-options="letter for letter in letters">
    <option style="display:none" value=""></option>
  </select>
  Selected Letter: {{ letter }} ({{ getType(letter) }})
</body>
</html>

The code above is rendered as follows: