AngularJS Select - How to Create AngularJS Select DropDown
Use the ng-option directive in AngularJS to create dropdown lists that select multiple values, based on objects or arrays, in this easy guide at rrtutors.com
AngularJS uses the ng-option directive to select multiple values in the dropdown list. AngularJS ng-option helps to see the available option of the data and choose one of them using the dropdown function. Use the ng-option directive to construct a dropdown list in AngularJS based on an object or an array.
Syntax
The following syntax helps to use AngularJS select function with the array.
|
<select ng-options="Array_value"> </select> |
The following examples show the dropdown function and its data using the AngularJS function.
Example#1: The single AngularJS select function with its data - AngularJS Select dropdown example
|
<!DOCTYPE html> <html> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script> <body> <div ng-app="firstApp" ng-controller="firstCtroller"> <h4> AngularJS Select function (ng-option):</h4> <select ng-model="selectedName" ng-options="value for value in names"> </select> </div> <script> var first app = angular.module('firstApp', []); first app.controller('firstCtroller', function($scope) { $scope.names = [ "India", "Mexico", "Germany", "Canada", "Japan" ]; }); </script> </body> </html> |
Output
 |
Example#2: The multiple AngularJS select function with Ng-Option - AngularJS Multi select dropdown example
|
<!DOCTYPE html> <html> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script> <body> <div ng-app="firstApp" ng-controller="firstCtroller"> <h4> AngularJS Select function (ng-option):</h4> <select ng-model="selectedName" ng-options="value for value in names"> </select> <select ng-model="selectedName" ng-options="value for value in student"> </select> </div> <script> var first app = angular.module('firstApp', []); first app.controller('firstCtroller', function($scope) { $scope.names = [ "India", "Mexico", "Germany", "Canada", "Japan" ]; $scope.student = [ "Ramchandra", "Merry", "John", "Radha", "Romi" ]; }); </script> </body> </html> |
Output
 |
Summary
The AngularJS select function uses the ng-option directive to create a dropdown list and shows multiple values. It is helpful in the user's interactive operations like form and tables