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

4 个答案: