Objectives and outcomes

In this tutorial we are going to learn about ng-options directive which commonly used with select control input. We can use ng-options with select to build a selectable dropdown list. We can also use ng-repeat to build the same but ng-repeat has limitations such as it can pass only strings where as ng-options passes an object.



Javascript

<script>
var app = angular.module("options_app",[]);
app.controller("opt_control",function($scope)
{
$scope.names = ["Graphic design","Web devlopment","Android App"];
});
</script>


HTML code:

<html>
<head>
<meta charset="utf-8">
<title>AngularJS ng-options</title>
<script src="angular-1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="options_app" ng-controller="opt_control">
<select ng-model="technology" ng-options="tech for tech in names"></select><br/><br/>
<p>Technology selected : <b>{{technology}}</b></p>
</div>
</body>
</html>


Select a value from the options and observe the effect





Technology selected : {{technology}}


AngularJS with ng-options makes the task of defining and handling select input values very easy. Also we do not have to write the code for long list of option tags, we have to define arrays only and the work is done.