Google News
logo
AngularJS Select
AngularJS lets you create dropdown lists (select box)  based on items in an array, or an object.
Using ng-options
To create a dropdown list, based on an object or an array in AngularJS, you should use the ng-options directive :
<!DOCTYPE html>  
<html> 
<head>
<title>AngularJS Using ng-options</title>
<script type="text/javascript" src="js/angular.min.js"></script>  
</head>
 
<body>
 
<div ng-app="myApp" ng-controller="myCtrl">
 
<select ng-model="selecte_name" ng-options="x for x in names">
</select>
 
</div>
 
<script type="text/javascript">
  var app = angular.module('myApp', []);
  app.controller('myCtrl', function($scope) {
    $scope.names = ["HTML", "HTML5", "CSS", "CSS3", "JavaScript", "JQuery", 
  "Bootstrap", "AngularJS", "PHP", "Java"];
  });
</script>
 
 
</body>
</html>
Output :
ng-options vs ng-repeat
You can also use the ng-repeat directive to make the same dropdown list
<!DOCTYPE html>  
<html> 
<head>
<title>AngularJS ng-options vs ng-repeat</title>
<script type="text/javascript" src="js/angular.min.js"></script>  
</head>
 
<body>
 
<div ng-app="myApp" ng-controller="myCtrl">
 
<select>
<option ng-repeat="x in names">{{x}}</option>
</select>
 
</div>
 
<script type="text/javascript">
  var app = angular.module('myApp', []);
  app.controller('myCtrl', function($scope) {
     $scope.names = ["HTML", "HTML5", "CSS", "CSS3", "JavaScript", "JQuery", 
  "Bootstrap", "AngularJS", "PHP", "Java"];
  });
</script>
 
</body>
</html>
Output :

The AngularJS ng-repeat directive repeats a block of HTML code for each item in an array, it can be used to create options in a dropdown list, but the ng-options directive was made especially for filling a dropdown list with options, and has at least one important advantage

Dropdowns made with ng-options allows the selected value to be an object, while dropdowns made from ng-repeat has to be a string.

What Do I Use?
Consider that you have an array of objects :
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.cars = [
        {model : "Audi S5", color : "White"},
        {model : "BMW 7-series", color : "Black"},
        {model : "Ferrari California T", color : "Red"},
{model : "Mercedes-Benz S-class", color : "Gray"}
    ];
});
Example (ng-repeat) :
The ng-repeat directive has its limitations, the selected value must be a string :
<!DOCTYPE html>  
<html> 
<head>
<title>AngularJS Slect box with Array of objects</title>
<script type="text/javascript" src="../js/angular.min.js"></script>  
</head>
 
<body>
 
<div ng-app="myApp" ng-controller="myCtrl">
 
<b>Select one car :</b>
<select ng-model="selectedCar">
<option ng-repeat="x in cars" value="{{x.model}}">{{x.model}}</option>
</select>
 
<h2>Your selected : {{selectedCar}}</h2>
 
</div>
 
<script type="text/javascript">
 
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.cars = [
        {model : "Audi S5", color : "White"},
        {model : "BMW 7-series", color : "Black"},
        {model : "Ferrari California T", color : "Red"},
{model : "Mercedes-Benz S-class", color : "Gray"}
    ];
});
 
</script>
 
</body>
</html>
Output :
Example (ng-options) :
When using the ng-options directive, the selected value can be an object :
<!DOCTYPE html>  
<html> 
<head>
<title>AngularJS Slect box with Array of objects</title>
<script type="text/javascript" src="js/angular.min.js"></script>  
</head>
 
<body>
 
<div ng-app="myApp" ng-controller="myCtrl">
 
<b>Select one car :</b>
<select ng-model="selectedCar" ng-options="x.model for x in cars">
</select>
 
<h1>Your selected : {{selectedCar.model}}</h1>
<h4>Car color is : {{selectedCar.color}}</h4>
 
</div>
 
<script type="text/javascript">
 
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.cars = [
        {model : "Audi S5", color : "White"},
        {model : "BMW 7-series", color : "Black"},
        {model : "Ferrari California T", color : "Red"},
{model : "Mercedes-Benz S-class", color : "Gray"}
    ];
});
 
</script>
 
 
</body>
</html>
Output :
Use the Data Source as an Object

We can also use data source as an object.

Consider that you have an object with following key-value pairs :

$scope.cars = {
car01 : "Audi",
car02 : "BMW",
car03 : "Ferrari",
car03 : "Mercedes-Benz",
};
Example (ng-options)
Using an object as the data source, x represents the key, and y represents the value :
<!DOCTYPE html>  
<html> 
<head>
<title>AngularJS Slect box with Source as an Object</title>
<script type="text/javascript" src="../js/angular.min.js"></script>  
</head>
 
<body>
 
<div ng-app="myApp" ng-controller="myCtrl">
 
    <b> Select one car :</b>
    <select ng-model="selectedCar" ng-options="x for (x, y) in cars">
    </select>
    
    <h2>Your selected : {{selectedCar}}</h2>
 
</div>
 
 
<script type="text/javascript">
 
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.cars = {
Car_01 : "Audi S5",
Car_02 : "BMW",
Car_03 : "Ferrari",
Car_04 : "Mercedes-Benz"
}
});
 
</script>
 
</body>
</html>
Output :
Another Example
The selected value will still be the value in a key-value pair, only this time it is an object :
<!DOCTYPE html>  
<html> 
<head>
<title>AngularJS Slect box with Source as an Object</title>
<script type="text/javascript" src="js/angular.min.js"></script>  
</head>
 
<body>
 
<div ng-app="myApp" ng-controller="myCtrl">
 
<b>Select one car : </b>
<select ng-model="selectedCar" ng-options="x for (x, y) in cars">
</select>
<h4>(or)</h4>
<b>Select one car : </b>
<select ng-model="selectedCar" ng-options="y.brand for (x, y) in cars">
</select>
 
<h2>Your selected : {{selectedCar.brand}}</h2>
<h3>Model : {{selectedCar.model}}</h3>
<h4>Color : {{selectedCar.color}}</h4>
 
 
</div>
 
<script type="text/javascript">
 
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.cars = {
Car_01 : {brand : "Audi", model : "S5", color : "White"},
Car_02 : {brand : "BMW", model : "7-series", color : "Black"},
Car_03 : {brand : "Ferrari", model : "California T", color : "Red"},
Car_04 : {brand : "Mercedes-Benz", model : "S-class", color : "Gray"}
}
});
 
</script>
 
</body>
</html>
Output :