Angularjs provides the way to bind HTML select elements with angularjs model
The select directive also provides dynamic option value using ng-repeat and ng-options
When the item from select element is get selected from option then it is bind with the value of ng-model associated with select element using angularjs two-way binding.
Setting option value using the value attribute of the option element will set this value as a string.
On selection of this value in ng-model the model variable must be a string type.
https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular.min.jsselect is
1 2 3 | <select ng-model="string" [name="string" ]="" [multiple="string" [required="string" [ng-required="string" [ng-change="string" [ng-options="string" [ng-attr-size="string"> ... </select> |
description of parameters fields is self-explanatory.
To access the value in the model you have to provide modal name rest of the attributes are optional as per requirement anyone can use.
let us see one basic example for selecting a value in the model
ng options default : Select default option in angularjs
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script> <div ng-app="myApp" ng-controller="selectController"> <form name="myForm"> <label for="favouriteColor"> Select You Favourite Color: </label><br> <select name="favouriteColor" ng-model="favouriteColor"> <option value="red">Red</option> <option value="green">Green</option> <option value="blue">Blue</option> <option value="orange">Orange</option> </select><br> you have selected: {{favouriteColor}} </form> </div> <script> var app = angular.module('myApp', []); app.controller('selectController', function($scope) { }); </script> |
Angularjs get selected option value dynamically
populating select with dynamic values
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script> <div ng-app="myApp" ng-controller="selectController1"> <form name="myForm"> <label for="favouriteColor"> Select You Favourite Color: </label><br> <select name="favouriteColor" ng-model="favouriteColor"> <option ng-repeat="color in colors" ng-value="color">{{color}}</option> </select><br> you have selected: {{favouriteColor}} </form> </div> <script> var app = angular.module('myApp', []); app.controller('selectController1', function($scope) { $scope.colors=["Red","Greed","Blue","Orange"]; }); </script> |
Populate dropdown with json data using angularjs
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <!DOCTYPE html> <html> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script> <body> <div ng-app="myApp" ng-controller="selectController2"> <form name="myForm"> <label for="favouriteColor"> Select You Favourite Color: </label><br> <select name="favouriteColor" ng-model="favouriteColor"> <option ng-repeat="color in colors" ng-value="color.id">{{color.name}}</option> </select><br> you have selected: {{favouriteColor}} </form> </div> <script> var app = angular.module('myApp', []); app.controller('selectController2', function($scope) { $scope.colors=[{id:1, name:"Red"}, {id:2,name:"Greed"}, {id:3,name:"Blue"}, {id:4, name:"Orange"} ]; }); </script> </body> </html> |
Angularjs multiple select example
To select multiple in the above program use multiple with the select element as below
1 2 3 | <select name="favouriteColor" ng-model="favouriteColor" multiple=""> <option ng-repeat="color in colors" ng-value="color.id">{{color.name}}</option> </select><br> |
by holding the control key with a click can select multiple values
Using ng-option with select to generate dynamic option value
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <!DOCTYPE html> <html> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script> <body> <div ng-app="myApp" ng-controller="selectController2"> <form name="myForm"> <label for="favouriteColor"> Select You Favourite Color: </label><br> <select name="favouriteColor" ng-model="favouriteColor" ng-options="color.id as color.name for color in colors" >{{color.name}}</option> </select><br> you have selected: {{favouriteColor}} </form> </div> <script> var app = angular.module('myApp', []); app.controller('selectController2', function($scope) { $scope.colors=[{id:1, name:"Red"}, {id:2,name:"Greed"}, {id:3,name:"Blue"}, {id:4, name:"Orange"} ]; }); </script> </body> </html> |
pre-populating any specific value in ng-options is easy in the following example you can see this.
Consider we have to populate Blue as default value then set $scope.favouriteColor=3 in controller
see below
1 | $scope.favouriteColor=3; |
Read More
How to create First Angular App (Step by step )