AngularJS ng-options Directive

The AngularJS ng-options directive is used to dynamically generate a list of <option> elements for the <select> element.

Syntax

<select ng-model="selectedFruit" ng-options="fruit.name for fruit in fruits">
      <option value="">-- choose color --</option>
    </select>

AngularJS ng-options Arguments

Here is a list of AngularJS ng-options Arguments.

Directives	Description
ng-model	AngularJS expression to bind the text.
name (optional)	Name of the control input control.
required (optional)	Validate input type text is required.
ng-required (optional)	AngularJS expression ng-required expression evaluates to true.
ng-options (optional)	Add options to select control as array data sources or object data source.

AngularJS ng-options Directive Example

<!DOCTYPE html>        
<html>        
<head> <!-- www.techstrikers.com -->        
<title>ngOptions Test Sample</title>        
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>        
        
<script>        
  var app = angular.module('ngOptionsExample', [])
  app.controller('ngOptionsController', ['$scope', function($scope) {
    $scope.fruits = [
      {name:'Banana', type:'seedless'},
      {name:'Apple', type:'seed'},
      {name:'Orange', type:'seed'},
      {name:'Graps', type:'seedless'},
      {name:'Papaya', type:'seed'}
    ];
    $scope.selectedFruit = $scope.fruits[1];
  }]);
  
</script>        
</head>        
<body style="background-color:#DDE4E9;" ng-app="ngOptionsExample">        
  <fieldset style="background-color:#DDE4E9;">          
    <legend>AngulerJS ngOptions Example</legend> 
    <p style="font-family:Arial;"><b>Simple data binding in <li>:</b></p>
    
<div ng-controller="ngOptionsController" style="font-family:arial;">   
    
  <form name="myform">  
   <ul>
    <li ng-repeat="fruit in fruits">
      <label>Fruit Name :- {{fruit.name}}</label>
    </li>
  </ul>  
    <p style="font-family:Arial;"><b>Binding data to option list:</b></p>
    <label>Select your favourite fruit:</label>
    <select ng-model="selectedFruit" ng-options="fruit.name for fruit in fruits">
      <option value="">-- choose color --</option>
    </select>
<p style="font-family:Arial;color:yellow;background:steelblue;padding:3px;width:350px;"     
        ng-show='!myform.input.$valid'>Currently selected: {{ selectedFruit.name }}</p>      
  </form>   
</div>    
      </fieldset>         
</body>        
</html>

See Live Example

« Previous

AngularJS Code Examples

AngularJS Live Demo

ASP.NET Code Examples

Javascript Code Examples

Interview Q & A

Google MAP API Live Demo

Google MAP API Code Examples

Utility Tools

Articles

Angularjs Tutorials

Angularjs References

Angularjs Examples

AngularJS ng-options Directive

AngularJS ng-options Arguments

AngularJS ng-options Directive Example

Recent Articles