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>

修改

这是demo

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>

angular js数组数据显示不正确

4 个答案: