How to load dynamic record from database mysql in angularjs?
Question
Here I want to load database user in select box using angular.
<div ng-app="myapp" ng-controller="myctrl" class="centered">
<label>Select User</label>
<select ng-model="selectedItem" ng-options="item.name for item in list">
<option value="">-- choose --</option>
</select>
<h2>Selected:</h2>
{{selectedItem.name}}
</div>
<script type="text/javascript">
var app=angular.module('myapp',[]);
app.controller('myctrl', function($scope, $http) {
$http({
method : "GET",
url : "http://localhost/demo/angular/getdata.php"
}).then(
function (response) {
$scope.list = response.data.records;
});
});
</script>
6 answers
solution1
0 2017-06-03 07:01:57
It is fully depend on the back-end. If the back-end is a RESTFull service then it is much easy to get data from the server and fill a form.
By the way, getting data from a back-end is independent of Programming languages. Here is an example in Java+Angularjs
https://spring.io/guides/gs/consuming-rest-angularjs/
And this is an example that show how to implement a RESTFull API in PHP:
https://www.leaseweb.com/labs/2015/10/creating-a-simple-rest-api-in-php/
solution2
0 2017-06-03 07:04:31
Error in json if you see extra , after last object. Marked as bold below also Name should be like "Name".
Output : {"records":[{Name : "Reena"},{Name : "Diya"},{Name : "New"},{Name : "New1"},{Name : "Diya"},{Name : "Sonali" },{Name : "Sonali"},{Name : "Sonali"} , ]}
Suggestion:
Why you use cocatenate string to form json. You can use json_encode the array.
solution3
0 2017-06-03 07:04:32
Mistake you done was, item.name in your JSON you have item.Name rename it . it will work
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <!DOCTYPE html> <body> <div ng-app="myapp" ng-controller="myctrl" class="centered"> <label>Select User</label> <select ng-model="selectedItem" ng-options="item.Name for item in list"> <option value="">-- choose --</option> </select> <h2>Selected:</h2> {{selectedItem.Name}} </div> <script type="text/javascript"> var app = angular.module('myapp', []); app.controller('myctrl', function($scope, $http) { $scope.list = {"records":[{Name : "Reena"},{Name : "Diya"},{Name : "New"},{Name : "New1"},{Name : "Diya"},{Name : "Sonali" },{Name : "Sonali"},{Name : "Sonali"},]}; $scope.list = $scope.list.records; /* replace it with your request data $http({ method : "GET", url : "http://localhost/demo/angular/getdata.php" }).then( function (response) { $scope.list = response.data.records; }); */ }); </script> </body> </html>
solution4
0 2017-06-03 07:14:47
It's because your JSON array uses Name and your ng-options uses name .
Change your PHP so it uses name instead of Name .
Your PHP code is really a bad way of creating the JSON string you require:
There is a function called json_encode which will convert a Value into a JSON representation.
You can use stdClass to hold your information and simply turn the structure into a JSON String:
$personArray = array();
while($r = mysqli_fetch_row($sel)) {
$person = new stdClasS();
$person->name = $r[0];
$personArray[] = $person;
}
$results = new stdClass();
$results->records = $personArray;
echo json_encode($results); // {"records":[{"name":"Stephen"},{"name":"Jane"},{"name":"Sam"}]}
solution5
0 2017-06-03 07:56:01
Hope this will help you. Created a demo here:
<!DOCTYPE html>
<html>
<head>
<title>Demo for select box, AngularJS</title>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
</head>
<body>
<div ng-app="myapp" ng-controller="myctrl" class="centered">
<label>Select User</label>
<!-- use item.Name instead of item.name as per JSON structure -->
<select ng-model="selectedItem" ng-options="item.Name for item in list">
<option value="">-- choose --</option>
</select>
<h2>Selected:</h2>
{{selectedItem.Name}}
</div>
<script type="text/javascript">
var app = angular.module('myapp', []);
app.controller('myctrl', function($scope, $http) {
// Assuming you're getting list from API in below format as per your sample JSON provided in a comment
$scope.list = {"records":[{Name : "Reena"},{Name : "Diya"},{Name : "New"},{Name : "New1"},{Name : "Diya"},{Name : "Sonali" },{Name : "Sonali"},{Name : "Sonali"},]};
// update list variable as your sample JSON has records field but in html you're using without it
$scope.list = $scope.list.records;
/*
$http({
method : "GET",
url : "http://localhost/demo/angular/getdata.php"
}).then(function(response) {
$scope.list = response.data.records;
});
*/
});
</script>
</body>
</html>
solution6
0 ACCPTED 2017-06-08 06:36:22
<!DOCTYPE html>
<html>
<head>
<title>Dynemic Select box</title>
<!---load css-->
<link href="css/style.css" type="text/css" rel="stylesheet">
<link href="css/bootstrap.css" type="text/css" rel="stylesheet">
<!---load js-->
<script src="js/jquery-2.1.4.min.js" type="text/Javascript" ></script>
<script src="js/bootstrap.js" type="text/Javascript" ></script>
<script src="js/angular.min.js" type="text/Javascript" ></script>
</head>
<body
<?php
echo $header;
$userdata=$this->model_user->getuser();
$userdata =json_encode($userdata);
?>
<div ng-app="myapp" ng-controller="myctrl" class="centered">
<label>Select User</label>
<select ng-options="x.id as x.name for x in sample" ng-model="x.id" name="selectedItem" id="selectedItem">
<h2>Selected:</h2>
{{selectedItem.name}}
</div>
<script type="text/javascript">
var app=angular.module('myapp',[]);
app.controller('myctrl', function($scope) {
$scope.sample=<?php echo $userdata;?>;
});
</script>
</body>
</htnl>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.