AngularJS Select Box (Dropdown List) Binding with Validations Example

Here we will learn what is select box in angularjs, use of select box in angularjs, set default value to select box in angularjs, how to bind data to select box in angularjs, how validate select box in angularjs with example.

AngularJS Select Box (Dropdown List)

In angularjs, by using select boxes we can achieve dropdown functionality and we can bind data to dropdown list / select box using ng-repeat or ng-options directives. 

 

By using ng-model directive in angularjs we can get selected value of select box / dropdown list and we can set the value of dropdown list and also it will acts as data provider between scope and select box / dropdown list.

AngularJS Select Box / Dropdown List Example

Following is the example of using select box or dropdown list in angularjs.

 

Live Preview

<!DOCTYPE html>

<html>

<head>

<title>

AngularJs Select Box or Dropdown List example

</title>

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

</head>

<body ng-app="">

<div>

<h3>AngularJS Select Box or Dropdown List Example</h3>

<select name="users" ng-model="userSelect">

<option value="">--Select--</option>

<option value="1">Suresh</option>

<option value="2">Rohini</option>

<option value="3">Praveen</option>

</select>

</div>

</body>

</html>

If you observe above example we are binding options data to select box or dropdown list in angularjs application. Here we added empty value option to dropdown list because if we didn’t mention empty value option by default it will show empty record as first. Now we will run and see the output of angularjs application.

Output of AngularJS Select Box / Dropdown List Example

Following is the output of using select box of dropdown list in angularjs applications.

 

Angularjs select box / dropdown list example output or result

AngularJS Bind Select Box (Dropdown List) with ng-repeat

Following is the example of binding array list to select box or dropdown list values using ng-repeat directive in angularjs application.

 

Live Preview

<!DOCTYPE html>

<html>

<head>

<title>

AngularJs Bind Select Box or Dropdown List with ng-repeat example

</title>

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<script>

var app = angular.module('selectboxApp', []);

app.controller('selectboxCtrl', function ($scope) {

$scope.arrlist = [{

"userid": 1,

"name": "Suresh"

}, {

"userid": 2,

"name": "Rohini"

}, {

"userid": 3,

"name": "Praveen"

}];

});

</script>

</head>

<body  ng-app="selectboxApp" ng-controller="selectboxCtrl"

<div>

<h3>AngularJS Bind Select Box or Dropdown List with ng-repeat Example</h3>

<select name="users">

<option value="">--Select User--</option>

<option ng-repeat="option in arrlist" value="{{option.userid}}">{{option.name}}</option>

</select>

</div>

</body>

</html>

If you observe above code we are binding array list elements to dropdown list by using ng-repeat directive. Now we will run and check the output of above example.

Output of Binding Select Box with ng-repeat in AngularJS

Following is the result of binding array list to select box / dropdown list using ng-repeat directive in angularjs applications.

 

AngularJS Binding Select Box with ng-repeat example output or result

AngularJS Select Box / Dropdown List with Default Value Example

Here we will see how to set default value to select box or dropdown list in angularjs. By using ng-repeat directive we can bind select list or dropdown list values in angularjs same way ng-model directive will help us to set default value of select box / dropdown list.

 

Following is the example of binding array list to dropdown list and set default value to dropdown list using ng-model directive in angularjs.

 

Live Preview

<!DOCTYPE html>

<html>

<head>

<title>

AngularJs Set Default Value of Select Box or Dropdown List with ng-model example

</title>

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<script>

var app = angular.module('selectboxApp', []);

app.controller('selectboxCtrl', function ($scope) {

$scope.arrlist = [{

"userid": 1,

"name": "Suresh"

}, {

"userid": 2,

"name": "Rohini"

}, {

"userid": 3,

"name": "Praveen"

}];

$scope.userSelect = "2";

});

</script>

</head>

<body  ng-app="selectboxApp" ng-controller="selectboxCtrl"

<div>

<h3>AngularJS Set Default Value of Select Box / Dropdown List</h3>

<select name="users" ng-model="userSelect">

<option value="">--Select User--</option>

<option ng-repeat="option in arrlist" value="{{option.userid}}">{{option.name}}</option>

</select>

</div>

</body>

</html>

If you observe above code we are binding array list values dropdown list using ng-repeat directive and setting default value to dropdown list using ng-model directive. Now we will run and see the output that will be like as shown below.

Output of AngularJS Select Box / Dropdown List with Default Value

Following is the output of setting default value to dropdown list in angularjs applications.

 

AngularJS Select Box / Dropdown List with Default Value Example Output or Result

AngularJS Select Box (Dropdown List) Validation Example

Following is the example of validating select box or dropdown list by using ng-model property in angularjs applications.

 

Live Preview

<!DOCTYPE html>

<html>

<head>

<title>

AngularJS Select Box / Dropdown List Validation

</title>

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<script>

var app = angular.module('selectboxApp', []);

app.controller('selectboxCtrl', function ($scope) {

$scope.arrlist = [{

"userid": 1,

"name": "Suresh"

}, {

"userid": 2,

"name": "Rohini"

}, {

"userid": 3,

"name": "Praveen"

}];

$scope.checkselection = function () {

if ($scope.userSelect != "" && $scope.userSelect != undefined)

$scope.msg = 'Selected Value: '+$scope.userSelect;

else

$scope.msg = 'Please Select Dropdown Value';

}

});

</script>

</head>

<body  ng-app="selectboxApp" ng-controller="selectboxCtrl"

<div>

<h3>AngularJS Select Box / Dropdown List Validation</h3>

<select name="users" ng-model="userSelect">

<option value="">--Select User--</option>

<option ng-repeat="option in arrlist" value="{{option.userid}}">{{option.name}}</option>

</select>

</div><br /><br />

<input type="button" value="Submit" ng-click="checkselection()" /><br /><br />

<span style="color:red">{{msg}}</span><br />

</body>

</html>

If you observe above example we are checking whether dropdown selected any value or not on button click using ng-model value in angularjs. Now we will run and see the output of application.

Output of AngularJS Select Box / Dropdown List Validation

Following is the result of angularjs select box or dropdown list validation example.

 

AngularJS Select Box / Dropdown List Validation Example Output or Result

 This way we will use select box to achieve dropdown functionality in angularjs applications.