pTutorial

New way to learn Programming

AngularJS Select from database example

AngularJS Select from database example

Simple AngularJS example of select from database by using get method and ng-repeat.The following example contain dynamic select box from database.

HTMl for Select

<!DOCTYPE html>
<!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 ng-repeat="x in tempData">{{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('myCtrl', function ($scope, $http) {
$http.get("db.php")
.success(function (response) {
$scope.tempData = response;
});
$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

Beauty's tears are lovelies than her smiles.

LIKE ON FACEBOOK

+1 ON GOOGLE

SHARE ON TWITTER