我在尝试使用 Angular.js + PHP 从数组中获取信息时遇到问题。
想法是:当用户转到/post/76(例如)时，脚本将获取 ID 并返回所有相关信息(标题、内容、 View 等)。
$路由提供者
carolvaladares.config(function($routeProvider) {
$routeProvider.
when('/post/:postId', {
templateUrl : 'views/post.html',
controller : 'postCtrl'
})
});
Controller
carolvaladares.controller('postCtrl', function($scope, $http, $routeParams) {
var postId = $routeParams.postId;
$http.get("php/get-posts.php?id=" + postId).then(function (response) {
$scope.post = response.data;
});
});
PHP
<?php
require_once("connect.php");
header('Content-Type: application/json');
if (isset($_GET['id'])) {
$id = $_GET['id'];
$q = mysqli_query($conexao,"SELECT * FROM posts WHERE id = '$id'");
} else {
$q = mysqli_query($conexao,"SELECT * FROM posts");
}
$result = array();
while ($get = mysqli_fetch_assoc($q)) {
$result[] = $get;
}
echo json_encode($result);
?>
(在这种情况下，如果指定了id，它将只获取一个帖子的数据。否则，它将列出所有帖子的数据)。
到目前为止没有问题。但是当我尝试打印数组的单个字段时，它会在控制台上返回一个空对象 [] 并且不会在 HTML 中显示任何内容。
HTML
<div id="post">
{{post.title}} / DOES NOT WORK /
{{post}} / WORKS / (PRINTS THE WHOLE ARRAY)
</div>
提前致谢。
(已编辑)
数组
[
{
"id":"76",
"titulo":"Carrot Cake Americano",
"sub":"Para esse Fim de Ano, aproveite essa receita maravilhosa de bolo de cenoura!",
"corpo":"<p>Receitinha mara pra quem vai passar o dia 24 com a barriguinha no fogão tipo eu. <strong>o\/<\/strong> Nada mais, nada menos que ele, o tradicional <strong>Carrot Cake Americano.<\/strong><\/p>\r\n<p><strong><img src=\"http:\/\/www.carolvaladares.com.br\/staff\/uploads\/2015\/materia_gastronomia3_carrotcake_cv.jpg\" alt=\"\" \/><\/strong><\/p>\r\n<h2>Bora cozinhar!<\/h2>\r\n<p><strong>Massa – Ingredientes:<\/strong> <br \/><strong>2<\/strong> xícaras de farinha de trigo <br \/><strong>1<\/strong> xícara de açúcar <br \/><strong>12<\/strong> xícara de açúcar mascavo <br \/><strong>2<\/strong> colheres de chá de canela em pó <br \/><strong>1<\/strong> colher de chá de noz-moscada <br \/><strong>2<\/strong> colheres de chá de bicarbonato de sódio <br \/><strong>1<\/strong> colher de chá sal <br \/><strong>1\/2<\/strong> xícara de passas <br \/><strong>1\/2<\/strong> xícara de ovo <br \/><strong>2<\/strong> claras de ovos <br \/><strong>2<\/strong> xícaras de cenoura ralada <br \/><strong>1\/2<\/strong> xícara de maçã ralada <br \/><strong>1\/3<\/strong> de xícara de óleo <br \/><strong>3<\/strong> colheres de sopa de água quente<\/p>\r\n<p><img src=\"http:\/\/www.carolvaladares.com.br\/staff\/uploads\/2015\/materia_gastronomia_carrotcake_cv.jpg\" alt=\"\" \/><\/p>\r\n<p><strong>Cobertura – Ingredientes:<\/strong> <br \/><strong>500g<\/strong> de Filadelphia <br \/><strong>1<\/strong> xícara de chá de açúcar de confeiteiro <br \/><strong>1<\/strong> colher de chá de extrato de baunilha <br \/>Nozes para decorar<\/p>\r\n<p><strong>Modo de preparo:<\/strong> <br \/>— Pré-aqueça o forno a 250ºC <br \/>— Pulverize duas bandejas de bolo redondo (9 polegadas) com spray de cozinha sem gordura. <br \/>— Misture a farinha, os dois tipos de açúcar, canela, noz-moscada, bicarbonato de sódio e sal em uma tigela média. <br \/>— Bata o ovo e as claras em uma tigela grande. <br \/>— Adicione a cenoura, maçã, óleo e passas e água quente, mexendo até misturar. <br \/>— Com uma espátula, adicione a mistura de farinha à mistura de cenoura e mexa até misturar. <br \/>— Espalhe a massa uniformemente nas bandejas de bolo. <br \/>— Asse os bolos até dourar cerca de 30-32 minutos.<\/p>\r\n<p>Deixe esfriar por 15 minutos. Retire os bolos da forma e deixe esfriar completamente.<\/p>\r\n<p>Para fazer a cobertura, com a batedeira em velocidade média-alta, bata os ingredientes da cobertura até ficar homogêneo. Recheie o bolo e cubra com o creme de cream cheese.<\/p>\r\n<p><img src=\"http:\/\/www.carolvaladares.com.br\/staff\/uploads\/2015\/materia_gastronomia2_carrotcake_cv.jpg\" alt=\"\" \/><\/p>\r\n<p>Doce tem que ser bonito, por isso eu sempre faço cobertura em bolo com bico de confeiteiro, daí vai da imaginação de cada um. Pique as nozes ou use-as inteiras e jogue por cima.<\/p>\r\n<p>Deixe esfriar e depois se<strong> destrua<\/strong> com o <strong>bolo deuso!<\/strong><\/p>",
"colunista":"denise",
"slug":"gastronomia\/carrot-cake-americano",
"thumbnail":"staff\/uploads\/2015\/denise-materia_gastronomia3_carrotcake_cv.jpg",
"tags":"carrot cake, cake, carrot, cenoura, bolo, receita, americano, estados unidos, eua, usa, bolo de cenoura",
"source":"",
"data":"2015-12-22",
"hora":"13:00:00",
"views":"56",
"categoria":"gastronomia",
"aprovado":"1"
}
]
(已编辑)
解决方案是 {{post[0].x}} 并且对于 HTML 内容 ng-bind-html 以及依赖项 ngSanitize
最佳答案
你能展示打印出来的数组的样子吗？有助于调试。
无论如何......我的第一个猜测是你在访问数组时缺少一级数组
post[0].title
因为:mysql_fetch_assoc 返回一个数组，您将该数组放入一个数组中，并使用 json_encode 对其进行编码。
我的第二个猜测是你必须首先解析响应，就像它的 JSON: 做
$scope.post = JSON.parse(response.data);
关于javascript - Angular.js HTTP 获取使用 $routeParams，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34772292/