pTutorial

New way to learn Programming

AngularJS Dynamic Select

Angular Dynamic Select Example

Angularjs has a powerful directive ng-select that basically used to create select box or dropdown lists form an array. The following example contain single dynamic select box using array of object.

You can get the data from database as well using get method to get the data from the server using server side technology like PHP and assign it to studentdata. See the next example.

HTML for Select

<!DOCTYPE html>
<html>
<head>
<script src = "http://www.ptutorial.com/angularjs/
angular.min.js"></script>
<link rel="stylesheet" href="http://freeonlinecompiler.ptutorial.com/
css/bootstrap.min.css">
</head>
<body>
<div ng-app="ukApp" ng-controller="ukCtrl">
<div class="container">
<div class="form-group">
<label for="sel1">Select list (select one):</label>
<select class="form-control" ng-model="data.select1">
<option ng-repeat="x in studentdata">{{x.Name}}</option>
</select>
</div>

<div class="clear"></div>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 com-marg">
<a class="btn btn-default"  ng-click="save()">Save</a> 
<a class="btn btn-danger">Cancel</a></div>
</div>
</div>


</div>

</body>
</html>



Angular Select Example

<script>
var app = angular.module('ukApp', []);
app.controller('ukCtrl', function ($scope) {

$scope.studentdata= [
{
"Name" : "Umar Farooque",
"City" : "Delhi",
"Country" : "India"
},
{
"Name" : "Umar",
"City" : "Delhi",
"Country" : "India"
},
{
"Name" : "Rahul",
"City" : "Delhi",
"Country" : "India"
},
{
"Name" : "John",
"City" : "New York city",
"Country" : "USA"
}  
]


$scope.data = {};
$scope.data.select1 = '';

$scope.save = function () {
if($scope.data.select1== ''){
alert("Please Select on silgle select");
}else{
alert("You Have selected "+$scope.data.select1);
console.log($scope.data);
}
}

});
</script> 

Download

See Also


QUOTES OF THE DAY

The heart of melody can never be put down.

LIKE ON FACEBOOK

+1 ON GOOGLE

SHARE ON TWITTER