pTutorial

New way to learn Programming

AngularJS Select Example

Angular 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 select and multiple select with the help of live 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="myCtrl">
<div class="container">
<div class="form-group">
<label for="sel1">Select list (select one):</label>
<select class="form-control" ng-model="data.select1">
<option value="Option-1">Option-1</option>
<option value="Option-2">Option-2</option>
<option value="Option-3">Option-3</option>
<option value="Option-4">Option-4</option>
</select>

<br><br/>

<label for="sel2">Mutiple select Box Example</label>
<select multiple class="form-control" ng-model="data.select2">
<option value="Option-1">Option-1</option>
<option value="Option-2">Option-2</option>
<option value="Option-3">Option-3</option>
<option value="Option-4">Option-4</option>
<option value="Option-5">Option-5</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('myCtrl', function ($scope) {
$scope.data = {};
$scope.data.select1 = '';
$scope.data.select2 = '';

$scope.save = function () {
if($scope.data.select1== ''){
alert("Please Select on silgle select");
}else if($scope.data.select2== ''){
alert("Please Select on atleast on from multiple select");
}else{
alert("Ok"+"See the data on firebug");
console.log($scope.data);
}
}
});
</script> 

Download

See Also


QUOTES OF THE DAY

We are never deceived we deceive ourselves.

LIKE ON FACEBOOK

+1 ON GOOGLE

SHARE ON TWITTER