无法使用angular.js和PHP在视图上绑定数据
我需要使用Angular.js在页面上显示数据。首先,我使用PHP从数据库中获取所有数据。这里没有数据显示在页面上。我在浏览器控制台中获取以下检索到的数据无法使用angular.js和PHP在视图上绑定数据,php,mysql,angularjs,Php,Mysql,Angularjs,我需要使用Angular.js在页面上显示数据。首先,我使用PHP从数据库中获取所有数据。这里没有数据显示在页面上。我在浏览器控制台中获取以下检索到的数据 all data [{"0":"1","id":"1","1":"","name":"","2":"","pass":"","3":"","email":""},{"0":"2","id":"2","1":"subhra","name":"subhra","2":"12345","pass":"12345","3":"subh@gmail.c
all data [{"0":"1","id":"1","1":"","name":"","2":"","pass":"","3":"","email":""},{"0":"2","id":"2","1":"subhra","name":"subhra","2":"12345","pass":"12345","3":"subh@gmail.com","email":"subh@gmail.com"},{"0":"3","id":"3","1":"rakesh","name":"rakesh","2":"0901209474","pass":"0901209474","3":"maini","email":"maini"},{"0":"4","id":"4","1":"raj","name":"raj","2":"23457","pass":"23457","3":"rai","email":"rai"},{"0":"5","id":"5","1":"Rahul","name":"Rahul","2":"098765","pass":"098765","3":"shinha","email":"shinha"}]
我在下面解释我的代码
read.js:
read.php:
index.html:
Angular.js的演示
名称
电子邮件
密码
操作
{{users.name}
{{users.email}
{{users.pass}
请帮助我解决此问题并成功绑定表中的所有数据。Angular不知道更新的数据。如果不使用AJAX,请使用
$scope.$apply
var app=angular.module('Read_data',[]);
app.controller('readController',function($scope){
$.ajax({
type:'GET',
url:"php/read.php",
success: function(data){
$scope.$apply(function(){
$scope.data = angular.fromJson(data);
});
console.log('all data',$scope.data);
}
})
});
或者使用$http
(推荐)
你在哪里使用了data ng app=“Read_data”@ravenanigam:检查我的更新代码。我的问题是我无法在页面上显示数据。你能解释一下吗,问题是什么?为什么不能显示在页面上?@Rene:我得到的值是这样的
所有数据[{“id”:“2”,“name”:“subhra”,“pass”:“12345”,“email”:subh@gmail.com“},{id:“3”,“姓名:”“rakesh”,“通行证:”“0901209474”,“电子邮件:”“maini”},{id:“4”,“姓名:”“raj”,“通行证:”“23457”,“电子邮件:”“rai”},{id:“5”,“姓名:”“Rahul”,“通行证:”“098765”,“电子邮件:”“shinha”}]
在控制台中,但无法显示。请检查我的html页面。更新了我的答案。您需要使用angular.fromJson()
从JSON创建对象。测试,工作。使用$http
您不必这样做。
<?php
//database settings
$connect = mysqli_connect("localhost", "root", "*******", "AngularTest");
$result = mysqli_query($connect, "select * from users");
$data = array();
while ($row = mysqli_fetch_array($result)) {
$data[] = $row;
}
print json_encode($data);
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="Read_data">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Demo of Angular.js</title>
<link rel="stylesheet" href="css/style.css" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/angularjs.js" type="text/javascript"></script>
<script src="js/read.js" type="text/javascript"></script>
</head>
<body>
<center ng-controller="readController">
<div id="body">
<div id="content">
<table align="center">
<tr>
<th colspan="5"><a href="add_data.html">add data here.</a></th>
</tr>
<th> Name</th>
<th> Email</th>
<th> Password</th>
<th colspan="2">Operations</th>
</tr>
<tr ng-repeat="users in data">
<td>{{users.name}}</td>
<td>{{users.email}}</td>
<td>{{users.pass}}</td>
<td align="center"><a href="edit_data.php?edt_id={{users.id}}"><img src="images/pencil_small.png" align="EDIT" /></a></td>
<td align="center"><a href="javascript:delete_id('')"><img src="images/cross-small-icon.png" align="DELETE" /></a></td>
</tr>
</table>
</div>
</div>
</center>
</body>
</html>
var app=angular.module('Read_data',[]);
app.controller('readController',function($scope){
$.ajax({
type:'GET',
url:"php/read.php",
success: function(data){
$scope.$apply(function(){
$scope.data = angular.fromJson(data);
});
console.log('all data',$scope.data);
}
})
});
var app=angular.module('Read_data',[]);
app.controller('readController',function($scope, $http){
$http.get('php/read.php').
then(function(data) {
// this callback will be called asynchronously
// when the response is available
$scope.data = data.data;
}, function(response) {
// called asynchronously if an error occurs
// or server returns response with an error status.
});
});