2016-08-04 1 views
0

Ich bin noch ziemlich neu in diesem, aber ich habe Probleme mit meinem ng-repeat Ausgabe book.review und book.stars. Kann jemand darauf hinweisen, was falsch ist? Auch wenn ich wieng-repeat nicht Array-Ergebnisse ausgeben

zum Beispiel so etwas wie ein Wort im ng-repeat setzte Test Wort

Test Wort macht nie auf dem Bildschirm.

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.review}} 

          {{book.stars}} 
         </div> 
        </div>  
       </div> 
      </div> 
     </div> 
     <book-reviews></book-reviews> 
    </body> 
</html> 

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", [ '$scope', function($scope){ 
    $scope.books = [{ 
     $scope.title: "Harry Potter and the Sorcerer's Stone", 
     $scope.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.", 
     $scope.review: [ 
      { 
       $scope.stars: 5, 
       $scope.body: "I love this book!", 
       $scope.author: "[email protected]", 
       $scope.createdOn: 42434343 
      }, 
      { 
       $scope.stars: 4, 
       $scope.body: "It was pretty good. A little long though", 
       $scope.author: "[email protected]", 
       $scope.createdOn: 42434343 
      }, 
      { 
       $scope.stars: 5, 
       $scope.body: "It's the best book I've ever read.", 
       $scope.author: "[email protected]", 
       $scope.reatedOn: 454535543 
      } 
     ] 
    }]; 

}]) 
+0

Sie müssen speichern 'books' auf dem' $ scope', wenn man es aus der Sicht – rob

Antwort

2

Sie haben $ Rahmen zu verwenden, um die Bindungen zwischen dem Controller und dem Blick zu schaffen.

In Ihrem Fall:

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

I aktualisiert zugreifen möchten Code, um die obigen Änderungen widerzuspiegeln. Ich habe es fast. Ich sage jetzt {{book.review}} {{book.stars}} statt nichts, also ist das kein Fortschritt, aber es zieht immer noch nicht die Variablen. Irgendwelche Ideen? – user6680

+0

Kein Fehler wird auf der Konsole geworfen? – tpsilva

+0

Entfernen Sie den $ scope von den Eigenschaften innerhalb des books-Objekts, nur Bücher müssen im Bereich liegen. – tpsilva

0

Wie oben erwähnt Sie Bücher setzen auf den $ Umfang benötigen. Vielleicht möchten Sie auch eine andere ng-Wiederholung innerhalb der ersten für die Bewertungen einrichten.

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

dann die Sterne jeder Überprüfung

{{review.stars}} 

In Bezug auf Ihre zuletzt, nur muss Buch über den Umfang nutzen, um zu drucken. nicht die Variablen innerhalb des Objekts.

$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: "[email protected]", 
      createdOn: 42434343 
}, 
{ 
    stars: 4, 
    body: "It was pretty good. A little long though", 
    author: "[email protected]", 
    createdOn: 42434343 
}, 
{ 
    stars: 5, 
    body: "It's the best book I've ever read.", 
    author: "[email protected]", 
    reatedOn: 454535543 

} 
] 
     }]; 
1

Dies sollte für Sie arbeiten:

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

 
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: "[email protected]", 
 
     createdOn: 42434343 
 
    }, 
 
    { 
 
     stars: 4, 
 
     body: "It was pretty good. A little long though", 
 
     author: "[email protected]", 
 
     createdOn: 42434343 
 
    }, 
 
    { 
 
     stars: 5, 
 
     body: "It's the best book I've ever read.", 
 
     author: "[email protected]", 
 
     createdOn: 454535543 
 
    }] 
 
}]; 
 
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script> 
 

 
<div ng-controller="BookController" ng-cloak="" ng-app="MyApp"> 
 
    <div class="test" ng-repeat="book in books"> 
 
     <h4>{{book.title}}</h4> 
 
     {{book.description}} 
 
     <div ng-repeat="review in book.review"> 
 
      <hr/> 
 
      Stars: {{review.stars}}, {{review.body}} 
 
     </div> 
 
    </div> 
 
</div>

Verwandte Themen