使用 $routeParams 獲取 Angular.js HTTP

Question

我在嘗試使用 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>

提前致謝。

（已編輯）

大批

[
   {
      "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&atilde;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 &ndash; Ingredientes:<\/strong> <br \/><strong>2<\/strong> x&iacute;caras de farinha de trigo <br \/><strong>1<\/strong> x&iacute;cara de a&ccedil;&uacute;car <br \/><strong>12<\/strong> x&iacute;cara de a&ccedil;&uacute;car mascavo <br \/><strong>2<\/strong> colheres de ch&aacute; de canela em p&oacute; <br \/><strong>1<\/strong> colher de ch&aacute; de noz-moscada <br \/><strong>2<\/strong> colheres de ch&aacute; de bicarbonato de s&oacute;dio <br \/><strong>1<\/strong> colher de ch&aacute; sal <br \/><strong>1\/2<\/strong> x&iacute;cara de passas <br \/><strong>1\/2<\/strong> x&iacute;cara de ovo <br \/><strong>2<\/strong> claras de ovos <br \/><strong>2<\/strong> x&iacute;caras de cenoura ralada <br \/><strong>1\/2<\/strong> x&iacute;cara de ma&ccedil;&atilde; ralada <br \/><strong>1\/3<\/strong> de x&iacute;cara de &oacute;leo <br \/><strong>3<\/strong> colheres de sopa de &aacute;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 &ndash; Ingredientes:<\/strong> <br \/><strong>500g<\/strong> de Filadelphia <br \/><strong>1<\/strong> x&iacute;cara de ch&aacute; de a&ccedil;&uacute;car de confeiteiro <br \/><strong>1<\/strong> colher de ch&aacute; de extrato de baunilha <br \/>Nozes para decorar<\/p>\r\n<p><strong>Modo de preparo:<\/strong> <br \/>&mdash; Pr&eacute;-aque&ccedil;a o forno a 250&ordm;C <br \/>&mdash; Pulverize duas bandejas de bolo redondo (9 polegadas) com spray de cozinha sem gordura. <br \/>&mdash; Misture a farinha, os dois tipos de a&ccedil;&uacute;car, canela, noz-moscada, bicarbonato de s&oacute;dio e sal em uma tigela m&eacute;dia. <br \/>&mdash; Bata o ovo e as claras em uma tigela grande. <br \/>&mdash; Adicione a cenoura, ma&ccedil;&atilde;, &oacute;leo e passas e &aacute;gua quente, mexendo at&eacute; misturar. <br \/>&mdash; Com uma esp&aacute;tula, adicione a mistura de farinha &agrave; mistura de cenoura e mexa at&eacute; misturar. <br \/>&mdash; Espalhe a massa uniformemente nas bandejas de bolo. <br \/>&mdash; Asse os bolos at&eacute; 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&eacute;dia-alta, bata os ingredientes da cobertura at&eacute; ficar homog&ecirc;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&ccedil;o cobertura em bolo com bico de confeiteiro, da&iacute; vai da imagina&ccedil;&atilde;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

Answer 1

你能展示打印出來的數組的樣子嗎？ 將有助於調試。

無論如何......我的第一個猜測是你在訪問它時缺少數組的1級

post[0].title 

因為： mysql_fetch_assoc返回一個數組，您將該數組放入一個數組中並使用json_encode進行編碼。

我的第二個猜測是你必須首先解析響應，因為它的 JSON: do

$scope.post = JSON.parse(response.data);