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>
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>
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.
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"}
];
});
ng-repeat
) :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>
ng-options
) :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>
We can also use data source as an object.
Consider that you have an object with following key-value pairs :
ng-options
) <!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>
<!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>