pTutorial

New way to learn Programming

AngularJS Select from server

Angular Select Example

Angularjs has a powerful directive ng-select that basically used to create select box or dropdown lists form an array. Array (array of objects)can be any where in the server may be in the same file or other file on the server. The following example contain dynamic select box from another file.

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.

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) {
$scope.data = {};
$scope.data.select1 = '';
$http.get("data1.php")
.success(function (response){
$scope.tempData = response.studentdata;
});
$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

Everything flows, nothing stays still.

LIKE ON FACEBOOK

+1 ON GOOGLE

SHARE ON TWITTER