annonymus annonymus - 1 month ago 8
AngularJS Question

angular js array data is not showing properly

I want to show comments array data in html but it is not showing data properly. What should I do? Data is showing same like in comments array. What am I doing wrong? What should I do?

<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

you should use ng-repeat to iterate through the array and show relevant data from the array elements:

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

EDIT:

Here is a demo