Question

我在app.js文件中输出嵌套数组时遇到问题。我可以输出外部数组，但是书的评论不会在屏幕上呈现。如何在标题下输出嵌套数组。这是我到目前为止所拥有的。

app.js

var app = angular.module('DirectivesTest', []);
app.directive('bookReviews', function(){
    return {
        restrict: 'E',
        templateUrl: 'book-reviews.html',
        controller: 'BookController'
     //controller function
}; //end return
}) //end directive



app.controller("BookController",  function($scope){
$scope.books = [{


title: "Harry Potter and the Sorcerer's Stone",
description: "Harry Potter has no idea how famoushe  is. That's because he's being raised by his miserable aunt and uncle who are terrified Harry will learn that he's really a wizard, just as his parents were. But everything changes when Harry is summoned to attend an infamous school for wizards, and he begins to discover some clues about his illustrious birthright. From the surprising way he is greeted by a lovable giant, to the unique curriculum and colorful faculty at his unusual school, Harry finds himself drawn deep inside a mystical world he never knew existed and closer to his own noble destiny.",

review: [{


stars: 5,
body: "I love this book!",
author: "JoeJohnson@gmail.com",
createdOn: 42434343

},
{

stars: 4,
body: "It was pretty good. A little long though",
author: "PaulPaulson@gmail.com",
createdOn: 42434343 
},
{
stars: 5,
body: "It's the best book I've ever read.",
author: "JimJohnson@gmail.com",
createdOn: 454535543

}
]
        }];

})

的index.html

<!DOCTYPE html>
<html ng-app="DirectivesTest">
<head>
    <title>Directives Practice</title>
    <link rel="stylesheet" href="app.css">
    <script src="bower_components/angular/angular.js"></script>
<script src="app.js"></script>
</head>
<body>
<div id="header">
The #1 Book Review Site With Only 6 Books!
</div>
<div class="container">
    <div class="row">
<div class="col-md-4">
<div ng-controller="BookController">
    <div class="test" ng-repeat="book in books">
{{book.title}}
<div ng-repeat="bookReview in books.review">
{{bookReview.review}}
</div> <!--End parent ng-repeat-->

</div>      
</div>



</div>

</div>
<book-reviews></book-reviews>
</body>
</html>

Answer 1

应该是

<div ng-repeat="bookReview in book.review">不是

<div ng-repeat="bookReview in books.review">

Answer 2

<div ng-controller="BookController">
  <div class="test" ng-repeat="book in books">
    {{ book.title }}
    <div ng-repeat="review in book.review">
      {{ review.body }}
    </div>
  </div>
</div>

这是因为第一个ng-repeat从$ scope.books中获取每个项目，从而创建一个book实例。然后你有一个嵌套转发器，转发器必须使用原始数组项中的父实例。在这种情况下，book。

考虑这个伪代码：

each item in array
  each subitem in item

最初你创建了这个伪代码：

each item in array
  each subitem in array.item

当你这样写出来时，就会明白你的错误是什么。

ng-repeat嵌套数组的角度为

2 个答案: