角度js數組數據顯示不正確

Question

我想以html顯示注釋數組數據，但未正確顯示數據。 我該怎么辦？ 數據顯示與注釋數組中相同。 我究竟做錯了什么？ 我該怎么辦？

<ul class="media-list"  ng-controller="dishDetailController as menuCtrl">
    <li class="media" ng-repeat="dish in menuCtrl.dishes">
        <div class="media-left media-middle">
            <a href="#">
                <img class="media-object img-thumbnail"
                  ng-src={{dish.image}} alt="Uthappizza">
            </a>
        </div>
        <div class="media-body">
            <h2 class="media-heading">{{dish.name}}
                <span class="label label-danger">{{dish.label}}</span>
                <span class="badge">{{dish.price | currency}}</span>
            </h2>
            <p>{{dish.description}}</p>
        </div>
        <div class="col-xs-9 col-xs-offset-1">
            <p><strong>Customers Comment  &nbsp; &nbsp;</strong>  
                 sort by:   <input type="text" ng-model="dish.comment">
            </p>
            <blockquote>
                <p>{{dish.comments  }}</p>
                <footer> <cite title="Source Title "></cite></footer>
            </blockquote>
        </div>            


var dishes=[
{
    name:' Salad with Eggs',
    image:'images/image-2.jpg',
    label:'Delicous',
    price:'10',
    description:' Health salad with eggs and wonder taste with reasonable price !',
    comments:[
    {
        rating:5,
        comment:'',
        author:'John Doe',
        date:Date
    }
],

https://i.stack.imgur.com/2e35Y.jpg

Answer 1

您應該使用ng-repeat遍歷數組並顯示數組元素中的相關數據：

<blockquote ng-repeat="comment in dishes.comments">
   <p>{{comment.comment}}</p>
   <p>{{comment.author}}</p>
   <footer> <cite title="Source Title "></cite></footer>
</blockquote>

編輯：

這是一個演示

Answer 2

您的ng-repeat應該是這樣的，

 <ul class="media-list" ng-controller="dishDetailController">
    <li class="media" ng-repeat="dish in dishes">
      <div class="media-left media-middle">
        <a href="#">
          <img class="media-object img-thumbnail" ng-src={{dish.image}} alt="Uthappizza">
        </a>
      </div>
      <div class="media-body">
        <h2 class="media-heading">{{dish.name}}
        <span class="label label-danger">{{dish.label}}</span>
        <span class="badge">{{dish.price | currency}}</span></h2>
        <p>{{dish.description}}</p>
      </div>
      <div class="col-xs-9 col-xs-offset-1">
        <blockquote>
          <p><strong>Customers Comment  &nbsp; &nbsp;</strong> sort by:
          <input type="text" ng-model="comment">
        </p>
          <blockquote ng-repeat="eachline in dish.comments  | filter:comment">
            <p>{{eachline.comment}}</p>
            <p>{{eachline.author}}</p>
            <footer> <cite title="Source Title "></cite></footer>
          </blockquote>
        </blockquote>
      </div>
    </li>
  </ul>

DEMO

Answer 3

我想你想要這樣的東西。

<blockquote>
    <p> {{dish.comments.rating  }}</p>
    <p> {{dish.comments.comment  }}</p>
    <p> {{dish.comments.author  }}</p>
    <p> {{dish.comments.date | date: 'dd/MM/yyyy' }}</p>
</blockquote>

Answer 4

    <div class="row row-content" ng-controller="DishDetailController as DishCtrl">
     <div class=" col-xs-12 "> <div class="media ">
            <div class="media-left media-middle ">
                <a href="# ">
                    <img class="media-object img-thumbnail " ng-src={{dish.image}} alt="Uthappizza ">
                </a>
            </div>
            <div class="media-body ">
                <h2 class="media-heading ">{{dish.name}}
                    <span class="label label-danger ">{{dish.label}}</span>
                    <span class="badge ">{{dish.price | currency}}</span></h2>
                <p>{{dish.description}}</p>
            </div>
        </div>
    </div>
    <div class="col-xs-9 col-xs-offset-1">
        <ul class="list-inline">
            <li>
                <h2>customer comments&nbsp;&nbsp;&nbsp;&nbsp;</h2>
            </li>
            <li>Sort by: <input type="text" ng-model="query"></li>

        </ul>
        <ul class="list-unstyled">
            <li ng-repeat="comment in dish.comments | orderBy:query">
                <blockquote>
                    <p> {{comment.rating}} stars</p>
                    <p>{{comment.comment}}</p>
                    <footer>{{comment.author}} ,{{comment.date | date:'MMM,dd,yyyy'}}</footer>
                </blockquote>
            </li>
        </ul>
    </div>