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>
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. |
<!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