AngularJS Select Box

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.

technology=["HTML","AngularJS","CSS","C","JAVA","PHP"];

HTML:

Viewable HTML contents in 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>

Logic:

Controller logic for the AngularJS application.

app.controller("selectCtrl", function($scope, $http) {
    $scope.technology=["HTML","AngularJS","CSS","C","JAVA","PHP"];  
});

Code Explanation for select box in AngularJS:

Code Explanation for AngularJS Select Box

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.

PDF

AngularJS Select Box

Syntax for Select Box in AngularJS:

Sample code for Select Box in AngularJS:

Data:

HTML:

Logic:

Code Explanation for select box in AngularJS:

Sample Output for select box in AngularJS:

Related Searches to AngularJS Select Box

Wikitechy

Join our Community

Other Languages