2016-08-16 66 views
0

我有一段應該使用ng-repeat顯示的註釋,但我無法訪問數據。AngularJS無法使用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>

回答

2

這裏你的錯誤是entry對象表示dish.comments陣列中的一個對象,所以訪問數據,你只需要刪除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> 
+0

這個工作!非常感謝! –

1

試試這個:

<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> 
0

你需要更改您的代碼此

<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