ng-repeat 嵌套 json 数组 angularJS

Question

我正在尝试使用 angular ng-repeat 指令在嵌套的 json 对象中迭代注释，但不知何故它似乎无法访问它，我做错了什么？

这里是json

        posts: [
        {
            title: 'Free pizza at club meetings',
            upvotes: 15,
            comments: [
                {commento:'comment1'},
                {commento:'comment2'}
            ]
        },
        {
            title: 'End all club emails with Laffy Taffy jokes',
            upvotes: 9,
            comments: [],
        }
];

这里是视图

    <div class="col-lg-12 col-xs-12 comment" ng-repeat="post in posts | orderBy:'-upvotes'">
    <p>{{post.title}}</p>
    <p>
        <span class="glyphicon glyphicon-plus-sign" ng-click="upVote(post)" style="cursor:pointer;"></span> Upvotes: {{post.upvotes}}
    </p>
    <p ng-repeat comment in post.comments>
    {{comment.commento}}
    </p>
</div>

视图中的错误提示

Answer 1

您 ng-repeat 的语法错误：

<p ng-repeat comment in post.comments>

应该是

<p ng-repeat="comment in post.comments">

Answer 2

ok 只是格式错误

<p ng-repeat="comment in post.comments">

Answer 3

只是小的语法错误- 检查下面的代码：JSFiddle

var app = angular.module("demoApp", []);

app.controller('myCtrl', function($scope){

    $scope.posts= [
            {
                title: 'Free pizza at club meetings',
                upvotes: 15,
                comments: [
                    {commento:'comment1'},
                    {commento:'comment2'}
                ]
            },
            {
                title: 'End all club emails with Laffy Taffy jokes',
                upvotes: 9,
                comments: [{commento:'comment3'},
                    {commento:'comment4'}]
            }
    ];
  $scope.upVote = function(post){}
});

<div ng-app="demoApp" ng-controller="myCtrl">
<div ng-repeat="post in posts">
    <span>{{post.title}}</span>
    <p class="glyphicon glyphicon-plus-sign" ng-click="upVote(post)" style="cursor:pointer;"></p> Upvotes: {{post.upvotes}}
    
    <p ng-repeat = "comment in post.comments">
        {{comment.commento}}
    </p>
</div>
</div>

Answer 4

观察：

使用<p ng-repeat="comment in post.comments">代替<p ng-repeat comment in post.comments>。
$scope.posts 对象声明不正确。使用 $scope.posts = [] 而不是 $scope.posts: [].

演示版

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

myApp.controller('MyCtrl',function($scope) {
    $scope.posts = [
        {
            title: 'Free pizza at club meetings',
            upvotes: 15,
            comments: [
                {commento:'comment1'},
                {commento:'comment2'}
            ]
        },
        {
            title: 'End all club emails with Laffy Taffy jokes',
            upvotes: 9,
            comments: [],
        }
];
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
<div class="col-lg-12 col-xs-12 comment" ng-repeat="post in posts | orderBy:'-upvotes'">
    <p>{{post.title}}</p>
    <p>
        <span class="glyphicon glyphicon-plus-sign" ng-click="upVote(post)" style="cursor:pointer;"></span> Upvotes: {{post.upvotes}}
    </p>
    <p ng-repeat="comment in post.comments">
    {{comment.commento}}
    </p>
</div>
</div>

ng-repeat 嵌套 json 数组 angularJS

ng-repeat nested json array angularJS

angularjs

json

ng-repeat