AngularJS Select Boxes

If you are interested to learn about the angularJS AJAX

AngularJS lets you create dropdown lists based on items in an array, or an object. 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.

Creating a Select Box Using ng-options

If you want to create a dropdown list, based on an object or an array in AngularJS, you should use the ng-options directive:

Example

div ng-app="myApp" ng-controller="myCtrl">;
select ng-model="selectedName" ng-options="x for x in names">;
/select> ;
/div> ;script> var app = angular.module('myApp', []);
app.controller('myCtrl',
 function($scope) {<br>  $scope.names = ["Emil", "Tobias", "Linus";
/script>

ng-options vs ng-repeat

You can also use the ng-repeat directive to make the same dropdown list:

Example

select;
option ng-repeat="x in names">{{x}};
/option>
/select>

Because the ng-repeat directive repeats a block of HTML code for each item in an array, it can be used to create options in a dropdown list, but the ng-options directive was made especially for filling a dropdown list with options.

What Do I Use?

You can use both the ng-repeat directive and the ng-options directive:

Assume you have an array of objects:

$scope.cars =  {model : 
"Ford Mustang", color : "red"},<br>  {model : "Fiat 500", color : "white"},<br>  {model :
"Volvo XC90", color : "black"}

Example

Using ng-repeat:

select ng-model="selectedCar";
option ng-repeat="x in cars" value="{{x.model}}">{{x.model}};
/option>
/select> 
h1>You selected: {{selectedCar}}
/h1>

When using the value as an object, use ng-value insead of value:

Example

Using ng-repeat as an object:

select ng-model="selectedCar">
option ng-repeat="x in cars" ng-value="{{x}}">
{{x.model}};/option
/select>;
h1>You selected a {{selectedCar.color}} {{selectedCar.model}}/h1>

Example

Using ng-options:

select ng-model="selectedCar" ng-options="x.model for x in cars">;
/select> 
h1>You selected: {{selectedCar.model}}
/h1>
p>Its color is: {{selectedCar.color}}
/p>

When the selected value is an object, it can hold more information, and your application can be more flexible. We will use the ng-options directive in this tutorial.

The Data Source as an Object

In the previous examples the data source was an array, but we can also use an object. Assume you have an object with key-value pairs:

$scope.cars = {<br>  car01 : 
"Ford",<br>  car02 :
 "Fiat",<br>  car03 :
 "Volvo"<br>};

The expression in the ng-options attribute is a bit different for objects:

Example

Using an object as the data source, x represents the key, and y represents the value:

select ng-model="selectedCar" ng-options="<strong>x for (x, y) in cars</strong>">
/select> 
h1>You selected: {{selectedCar}

The selected value will always be the value in a key-value pair. The value in a key-value pair can also be an object:

Example

The selected value will still be the value in a key-value pair, only this time it is an object:

$scope.cars = {<br>  car01 : {brand : "Ford", model : "Mustang", color : "red"},
<br>  car02 : {brand : "Fiat", model : "500", color : "white"},<br>  car03 :
 {brand : "Volvo", model : "XC90", color : "black"}<br>};<br>

The options in the dropdown list does not have to be the key in a key-value pair, it can also be the value, or a property of the value object:

Example

select;ng-model="selectedCar;
ng-options="<strong>y.
brand</strong>&nbsp;for (x, y) in cars";
/select&gt;

Limitation of ng-repeat

The ng-repeat directive has a limitation that the selected value must be a string:

See this example:

<!DOCTYPE html>  
<html>  
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>  
<body>  
<div ng-app="myApp" ng-controller="myCtrl">  
<p>Select a car:</p>  
<select ng-model="selectedCar">  
<option ng-repeat="x in cars" value="{{x.model}}">{{x.model}}</option>  
</select>  
<h1>You selected: {{selectedCar}}</h1>  
</div>  
<script>  
var app = angular.module('myApp', []);  
app.controller('myCtrl', function($scope) {  
    $scope.cars = [  
        {model : "Ford", color : "red"},  
        {model : "Honda", color : "white"},  
        {model : "Volvo", color : "black"},  
        {model : "Hundai", color : "gray"}  
    ];  
});  
</script>  
</body>  
</html>  

While using the ng-options directive, you can select an object value:

See this example:

<!DOCTYPE html>  
<html>  
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>  
<body>  
<div ng-app="myApp" ng-controller="myCtrl">  
<p>Select a car:</p>  
<select ng-model="selectedCar" ng-options="x.model for x in cars">  
</select>  
<h1>You selected: {{selectedCar.model}}</h1>  
<p>It's color is: {{selectedCar.color}}</p>  
</div>  
<script>  
var app = angular.module('myApp', []);  
app.controller('myCtrl', function($scope) {  
       $scope.cars = [  
        {model : "Ford", color : "red"},  
        {model : "Honda", color : "white"},  
        {model : "Volvo", color : "black"},  
        {model : "Hundai", color : "gray"}  
    ];  
  
});  
</script>  
</body>  
</html>  

Use data source as an object

We can also use data source as an object. Consider that you have an object with following key-value pairs:

$scope.cars = {  
        car01 : "Ford",  
        car02 : "Honda",  
        car03 : "Volvo",  
        car03 : "Hundai",  
    };  

The expression in the ng-options attribute is a bit different for objects:

See this example:

<!DOCTYPE html>  
<html>  
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>  
<body>  
<div ng-app="myApp" ng-controller="myCtrl">  
<p>Select a car:</p>  
<select ng-model="selectedCar" ng-options="x for (x, y) in cars">  
</select>  
<h1>You selected: {{selectedCar}}</h1>  
</div>  
<script>  
var app = angular.module('myApp', []);  
app.controller('myCtrl', function($scope) {  
    $scope.cars = {  
        car01 : "Ford",  
        car02 : "Honda",  
        car03 : "Volvo",  
        car03 : "Hundai",  
    }  
});  
</script>  
</body>  
</html>  

Example2:

The selected value will always be the value in a key-value pair. The value in a key-value pair can also be an object:

$scope.cars = {  
car01 : {brand : "Ford", model : "Mustang", color : "red"},  
car02 : {brand : "Honda", model : "city", color : "white"},  
car03 : {brand : "Volvo", model : "XC90", color : "black"},  
car04 : {brand : "Hundai", model : "Creta", color : "gray"}  
};  

See this example:

<!DOCTYPE html>  
<html>  
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>  
<body>  
<div ng-app="myApp" ng-controller="myCtrl">  
<p>Select a car:</p>  
<select ng-model="selectedCar" ng-options="x for (x, y) in cars">  
</select>  
<h1>You selected: {{selectedCar.brand}}</h1>  
<h2>Model: {{selectedCar.model}}</h2>  
<h3>Color: {{selectedCar.color}}</h3>  
</div>  
<script>  
var app = angular.module('myApp', []);  
app.controller('myCtrl', function($scope) {  
    $scope.cars = {  
car01 : {brand : "Ford", model : "Mustang", color : "red"},  
car02 : {brand : "Honda", model : "city", color : "white"},  
car03 : {brand : "Volvo", model : "XC90", color : "black"},  
car04 : {brand : "Hundai", model : "Creta", color : "gray"}  
    }  
});  
</script>  
</body>  
</html>  

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. 

<!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

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.

<!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 Boxes
Show Buttons
Hide Buttons