AngularJSがng-repeatを使用してコントローラデータにアクセスできない

Question

ng-repeatを使用して表示する必要のあるコメントがあるセクションがありますが、データにアクセスできません。

デバッグ後も、コントローラを変更せずにデータにアクセスすることさえできませんでした。 私は本当にAngularの方が新しいので、私は間違いを間違えてしまう傾向があります。

HTML/JS

'use strict'; 
 

 
angular.module('commentsApp', [])  
 
     .controller('DishDetailController', ['$scope', function($scope) { 
 

 
      var dish={ 
 
          name:'Uthapizza', 
 
          image: 'images/uthapizza.png', 
 
          category: 'mains', 
 
          label:'Hot', 
 
          price:'4.99', 
 
          description:'A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.', 
 
          comments: [ 
 
           { 
 
            rating:5, 
 
            comment:"Imagine all the eatables, living in conFusion!", 
 
            author:"John Lemon", 
 
            date:"2012-10-16T17:57:28.556094Z" 
 
           }, 
 
           { 
 
            rating:4, 
 
            comment:"Sends anyone to heaven, I wish I could get my mother-in-law to eat it!", 
 
            author:"Paul McVites", 
 
            date:"2014-09-05T17:57:28.556094Z" 
 
           }, 
 
           { 
 
            rating:3, 
 
            comment:"Eat it, just eat it!", 
 
            author:"Michael Jaikishan", 
 
            date:"2015-02-13T17:57:28.556094Z" 
 
           }, 
 
           { 
 
            rating:4, 
 
            comment:"Ultimate, Reaching for the stars!", 
 
            author:"Ringo Starry", 
 
            date:"2013-12-02T17:57:28.556094Z" 
 
           }, 
 
           { 
 
            rating:2, 
 
            comment:"It's your birthday, we're gonna party!", 
 
            author:"25 Cent", 
 
            date:"2011-12-02T17:57:28.556094Z" 
 
           } 
 

 
          ] 
 
        }; 
 

 
      $scope.dish = dish; 
 

 
     }]);

<div ng-app="commentsApp"> 
 
    <div ng-controller="DishDetailController"> 
 
    <div class="col-xs-9 col-xs-offset-1"> 
 
     <div class="blockquote" ng-repeat="entry in dish.comments"> 
 
     <blockquote> 
 
      <p>{{entry.comments.rating}} Stars</p> 
 
      <p>{{entry.comments.comment}}</p> 
 
      <footer>{{entry.comments.author}}, {{entry.comments.date | date}}</footer> 
 
     </blockquote> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

ここにあなたの間違いは、あなただけのcomments部品

を削除する必要があるデータにアクセスするよう entryオブジェクトは、 dish.comments配列内のオブジェクトを表しています

<div ng-app="commentsApp"> 
    <div ng-controller="DishDetailController"> 
    <div class="col-xs-9 col-xs-offset-1"> 
     <div class="blockquote" ng-repeat="entry in dish.comments"> 
     <blockquote> 
      <p>{{entry.rating}} Stars</p> 
      <p>{{entry.comment}}</p> 
      <footer>{{entry.author}}, {{entry.date | date}}</footer> 
     </blockquote> 
     </div> 
    </div> 
    </div> 
</div> 

Answer 2

はこれを試してみてください。

<div ng-app="commentsApp"> 
    <div ng-controller="DishDetailController"> 
    <div class="col-xs-9 col-xs-offset-1"> 
     <div class="blockquote" ng-repeat="entry in dish.comments"> 
     <blockquote> 
      <p>{{entry.rating}} Stars</p> 
      <p>{{entry.comment}}</p> 
      <footer>{{entry.author}}, {{entry.date | date}}</footer> 
     </blockquote> 
     </div> 
    </div> 
    </div> 
</div> 

Answer 3

をあなたはこの

<div ng-app="commentsApp"> 
<div ng-controller="DishDetailController"> 
    <div class="col-xs-9 col-xs-offset-1"> 

    <div class="blockquote" ng-repeat="entry in dish.comments"> 
     <blockquote> 
     {{entry}} 
     <p>{{entry.rating}} Stars</p> 
     <p>{{entry.comments}}</p> 
     <footer>{{entry.author}}, {{entry.date | date}}</footer> 
    </blockquote> 
    </div> 
</div> 
</div> 

にコードを変更する必要があり、ここでこれは働いていたplunker https://plnkr.co/edit/enMspBPd1y5duq6szCrX