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.
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.
Following is the example of using select box or dropdown list in angularjs.
<!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.
Following is the output of using select box of dropdown list in angularjs applications.
Following is the example of binding array list to select box or dropdown list values using ng-repeat directive in angularjs application.
<!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.
Following is the result of binding array list to select box / dropdown list using ng-repeat directive in angularjs applications.
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.
<!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.
Following is the output of setting default value to dropdown list in angularjs applications.
Following is the example of validating select box or dropdown list by using ng-model property in angularjs applications.
<!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.
Following is the result of angularjs select box or dropdown list validation example.
This way we will use select box to achieve dropdown functionality in angularjs applications.