Mam problemy z wyprowadzeniem zagnieżdżonej tablicymój plik app.js. Mogę uzyskać zewnętrzną tablicę do wyprowadzenia, ale recenzje dla książki nie wyrenderują się na ekranie, jak mogę uzyskać zagnieżdżoną tablicę do wyprowadzenia pod tytułem. Oto, co mam do tej pory.
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>
Odpowiedzi:
1 dla odpowiedzi № 1powinno być
<div ng-repeat="bookReview in book.review"> nie
<div ng-repeat="bookReview in books.review">
0 dla odpowiedzi nr 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>
Dzieje się tak dlatego, że pierwsze powtórzenie ng przyjmuje każdy element z $ scope.books, który tworzy instancję książki. Następnie masz zagnieżdżony repeater, że repeater musi użyć instancji nadrzędnej z oryginalnej tablicy elementów. Który w tym przypadku jest book.
Rozważmy ten pseudo kod:
each item in array
each subitem in item
Początkowo utworzyłeś ten pseudo kod:
each item in array
each subitem in array.item
co, gdy to wypiszesz, sprawi, że oczywiste będzie, że popełniłeś błąd.