我在尝试使用Angular.js + PHP从数组中获取信息时遇到问题。
这个想法是:当用户转到/post/76
(例如)时,脚本将获取ID并返回所有相关信息(标题,内容,视图等)。
$ routeProvider
carolvaladares.config(function($routeProvider) {
$routeProvider.
when('/post/:postId', {
templateUrl : 'views/post.html',
controller : 'postCtrl'
})
});
控制器
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>
提前致谢。
(适用EDITED)
阵列
[
{
"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"
}
]
(适用EDITED)
解决方案为{{post[0].x}}
,HTML内容ng-bind-html
以及依赖关系ngSanitize
答案 0 :(得分:1)
你能说明打印出来的阵列是怎么样的吗?有助于调试。
无论如何......我的第一个猜测就是你在访问它时缺少1级数组,如
post[0].title
因为:mysql_fetch_assoc
返回一个数组,然后将该数组放入数组并使用json_encode
对其进行编码。
我的第二个猜测是你必须首先解析响应,因为它的JSON:do
$scope.post = JSON.parse(response.data);