The AngularJS provides many advanced features to drop-down list.
We can get the data from the object or an array to the drop-down list but we should use ng-options instead of option.
We also use repeat directive for make the drop-down list.
We can filter the collection of data, Angular JS supports sorting.
Syntax for Select Box in AngularJS:
<select ng-model="name" ng-options="x for x in object"></select>
or
<select><option ng-repeat="x in object">{{x}}</option></select>
Sample code for Select Box in AngularJS:
Tryit<!DOCTYPE html><html><head><title>Wikitechy AngularJS Tutorials</title><script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/
angular.min.js"></script></head><body><div ng-app="myApp" ng-controller="selectCtrl"><h3>Selectbox using ng-repeat in AngularJS</h3><select><option ng-repeat="x in technology"> {{x}}</option></select><h3>Selectbox using ng-options in AngularJS</h3><select ng-model="name" ng-options="x for x in technology"></select></div><script>var app = angular.module( 'myApp', [] );app.controller("selectCtrl", function($scope) {$scope.technology=["HTML","AngularJS","CSS","C","JAVA","PHP"];});</script></body></html>
Data:
Set of data has been used in our AngularJS Application.
<div ng-app="myApp" ng-controller="selectCtrl"><h3>Selectbox using ng-repeat in AngularJS</h3><select><option ng-repeat="x in technology"> {{x}}</option></select><h3>Selectbox using ng-options in AngularJS</h3><select ng-model="name" ng-options="x for x in technology"></select></div>
The ng-controller is a directive to control the AngularJS Application.
The ng-repeat directive is used to create an options list for the select box from the technology array and that will be bind by {{ x }}.
The ng-options directive is used to create an options list for drop-down list from the technology array and that will be automatically bind in the select box.
“x for x in technology” is used to get each technology and bind to options in the select box.
The “selectCtrl” used to create the controller for the Application with $scope object argument.
The $scope.technology is an array that has list of technology.
Sample Output for select box in AngularJS:
The ng-repeat used create the list of options in the drop-down list.
The ng-options used create the list of options in the drop-down list, the default value will be blank.
