将PHP变量/数组数据传递给Angular JS

Question

将PHP变量/数组数据传递给Angular JS

5

我正在使用PHP数据库连接，使用"$row"作为数组来存储字段名为“name”的数据。但是，经过大量搜索，我无法找到如何将PHP变量传递给AngularJS的方法。以下是我正在尝试实现的代码。请问如何做到这一点？由于我刚开始学习，希望能得到您的帮助和支持。

<?php

$con = mysqli_connect('localhost','root','','practice');

if (!$con) {
    die("couldnt connect". mysqli_error);
}

$q= "select * from test";
$result= $con->query($q);

if ($result->num_rows>0) {

    while ($row = $result->fetch_assoc()) {

        echo $row['name']."<br>";

    }
}

print_r($result);

echo json_encode($result);

?>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.js">
</head>
<body>

<ul ng-init="names = <?php echo htmlspecialchars(json_encode($row)); ?>">
<li ng-repeat="x in names">
   <p>{{x.name}}</p>
</li>
</ul>
</body>
</html>

- Share fun

你的脚本需要进行一些严肃的整理，因为在你的HTML开始之前，你正在输出/打印大量的内容。如果这些内容仅用于测试数据库结果，那么为什么要将它们与**<br>**标签混合在一起呢？无论如何，echo $row['name']."<br>";的输出是什么？当你检查页面源代码时，你会看到来自数据库的任何数据吗？将该行更改为print_r($row['name']);，并让我知道是否已获取和打印数据（在你的HTML页面源代码中），然后我们将着手解决问题 :) - Ali

1

没有问题，数据库输出方面都很好，$row['name'] 完美地获取了数据，但问题出在 js 上，我该如何在 AngularJS 中显示 $row['name'] 的数组数据呢？ - Share fun

好的，接下来要做的是包含AngularJS脚本，类似于<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.js">。 - Ali

<?php echo htmlspecialchars(json_encode($row)); ?> 的值是什么？ - Ali

那么这是另一个问题，在你的循环中，你正在访问一个名为*name的字段，但它在你的数据集中不存在，我会在答案中解释这一点 :) - Ali

显示剩余4条评论

3个回答

1

如之前所讨论的那样，您需要按照以下方式格式化数据：names：

必须是有效的JSON格式
提供一个名为name的字段，因为您在循环(ng-repeat)中正在寻找它

目前，根据您在评论中提到的内容，分配给"names"的值为"eden frank matt"。这需要更改为类似于以下内容：

[
    {name: 'eden'},
    {frank: 'eden'},
    {matt: 'eden'}
]

所以当您检查HTML源代码时，我们应该有一个名为“people”的集合，然后遍历其所有元素并指向它们的字段“name”：

<!DOCTYPE html>
<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.js">
    </script>
</head>


<body ng-app>

<ul ng-init="people = [{name:'eden'}, {name:'frank'}, {name:'matt'}]">
    <li ng-repeat="person in people">
        <p>{{person.name}}</p>
    </li>
</ul>

</body>
</html>

- Ali

我已经问过你当你检查HTML源代码时（指在浏览器中）看到了什么。所以，当你在网页浏览器中打开自己的页面，并查看源代码时，相对于<ul ng-init="names = <?php echo htmlspecialchars(json_encode($row)); ?>">，你会看到什么呢？它应该是 <ul ng-init="names = .....">, 也就是说，我想知道那部分（**.....**）是什么。 - Ali

好的，@Ali，那也可以。但是还有另一种方法，我可以选择使用$http.get()和success函数，但是我不知道如何使用，因为我对AngularJS还很陌生，找不到确切的解决方案。如果你知道的话，请告诉我。 - Share fun

好的，它显示“null”，这意味着$row中没有任何内容，但是PHP正在显示数据，但是当我将其传递给AngularJS时，它显示为null。我一定做错了什么。无法弄清楚。 - Share fun

我认为你的问题不在于Angular JS，而是如何组装正确的数据结构以传递给你的小循环。你的集合来源无论是直接调用数据库还是通过服务器进行Ajax调用都无所谓，但是你必须确保我的答案中提到的两个要点得到满足：a.有效的JSON格式和b.每个项目都有一个字段名称，祝你好运 :) - Ali

请查看此链接：http://www.w3schools.com/angular/customers_mysql.php，这是将PHP数据格式化为JSON的方式，然后我们可以在AngularJS中轻松获取。请参考此链接：http://www.w3schools.com/angular/tryit.asp?filename=try_ng_customers_mysql。但问题是如何将数据转换为JSON代码。 - Share fun

显示剩余2条评论

0

我有类似的需求，以下方法对我有效。

data-ng-click="editField(product, '<?php echo $_SESSION["login_user"] ?>')"

- Prabhu Das

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Munanshu Madaan · Accepted Answer

您的php代码需要改进，使用下面的代码替换原有代码即可：

$arr = array();
if ($result->num_rows>0) {

while ($row = $result->fetch_assoc()) {

$arr[] = $row['name'] ;

}
}

然后将其作为回显。

<ul ng-init="names = <?php echo htmlspecialchars(json_encode($arr)); ?>">