AngularJS | Select Boxes
ng-options:
For creating dropdown list based on array items, should use ng-options directives:
Example-1:
<!DOCTYPE html> < html > < script src = </ script > < body > < center > < h2 style = "color:green" >GeeksforGeeks</ h2 > < div ng-app = "gfg" ng-controller = "myCtrl" > < select ng-model = "selectedName" ng-options = "x for x in names" > </ select > </ div > < script > var app = angular.module('gfg', []); app.controller('myCtrl', function($scope) { $scope.names = ["car", "cricket", "metro"]; }); </ script > < p >Dropdown List.</ p > </ center > </ body > </ html > |
Output:
ng-repeat:
Make same dropdown list using ng-repeat directives.
Dropdowns from ng-repeat has to be a string.
Example-2:
<!DOCTYPE html> < html > < script src = </ script > < body > < center > < h2 style = "color:green" >GeeksforGeeks</ h2 > < div ng-app = "gfg" ng-controller = "myCtrl" > < select > < option ng-repeat = "x in names" >{{x}} </ option > </ select > </ div > < script > var app = angular.module('gfg', []); app.controller('myCtrl', function($scope) { $scope.names = ["cric", "lion", "gfg"]; }); </ script > < p >Dropdown List.</ p > </ center > </ body > </ html > |
Output: