Question

我试图让Angular显示我通过PDO从数据库中提取的JSON数据。 PDO部分和JSON编码部分工作正常 - 控制台正在按预期返回数据。

但是，使用ng-repeat时，div会显示，但post.time不会显示。

HTML

<html ng-app="dataVis">
    . . .
    <body ng-controller="GraphController as graph">
        <div ng-repeat="post in graph.posts track by $index">
            {{post.time}}
        </div>
    </body>
</html>

JSON数据

[
    {
        "time": "1340",
        "postId": "282301",
        "likes": "2"
    },
    {
        "time": "1300",
        "postId": "285643",
        "likes": "0"
    }
] . . . (etc)

JS

(function () {

  var app = angular.module('dataVis', []);

  app.controller('GraphController', ['$http', function ($http) {
    var graph = this;
    graph.posts = [];
    $http.get('/query-general.php').success(function (data) {
      console.log(data); // returns JSON data
      graph.posts = data;
    });

  }]);

}());

起初我没有包含track by $index，但在收到欺骗错误后，我决定将其包括在内。

我想使用ng-repeat在HTML页面中显示JSON数据。任何人都可以伸出援助之手来实现这个目标吗？

Answer 1

在将数据传递给$ scope.graph.posts之前，首先需要声明$ scope.graph变量。

$scope.graph = {};
$scope.graph.posts = data;

工作示例 - JSFiddle http://jsfiddle.net/RkykR/294/

HTML

<h3>Ng-Repeat example</h3>
<div ng-app ng-controller="MyCtrl">

<table>
    <thead>
        <tr><td>time</td>
            <td>postID</td>
    <td>likes</td>
        </tr>
        </thead>
    <tbody>
                <tr ng-repeat="item in graph.posts"><td>{{item.time}}</td>
            <td>{{item.postId}}</td>
    <td>{{item.likes}}</td>
        </tr>
    </tbody>
</table>
</div>

的JavaScript

   var data = [
    {
        "time": "1340",
        "postId": "282301",
        "likes": "2"
    },
    {
        "time": "1300",
        "postId": "285643",
        "likes": "0"
    }
];

function MyCtrl($scope) {
    $scope.graph = {};
    $scope.graph.posts = data;
}

CSS

table {
    padding:5px;
    width:500px;

}

table td {
    border: 1px solid gray;
    padding:3px 0;
    text-align:center;
}

table thead td {
    font-weight:bold;
}

Answer 2

因为json将属性命名为"time"而不是time，您是否尝试使用数组表示法来访问它们？ e.g

<td>{{item["time"]}}</td>
<td>{{item["postId"]}}</td>
<td>{{item["likes"]}}</td>

Answer 3

我解决了这个问题。我在php标签之外的php文件中有评论。因此，当angular尝试从php页面获取JSON数据时，也会获取注释。感谢您的帮助。

AngularJS：ng-repeat不显示JSON

3 个答案: