Nivas Dhina Nivas Dhina - 3 months ago 6
Javascript Question

I have to make ng-repeat of a bunch of divs. How can i do that

I need to ng-repeat a bunch of

divs
like how i mention below. I want to iterate and populate each object in the list. In below code they have made separate entry for each list item. But i wish to get it from the angular object. I am absolutely stuck up. The objects would be having content-data and link to that picture.

<div class="panel-body">
<div class="media"> <a class="pull-left kit-avatar kit-avatar-36" href="#"> <img class="media-object" src="images/dummy/uifaces1.jpg" alt=""> </a>
<div class="media-body">
<div class="pull-right">
<div class="btn-group btn-group-xs"> <a href="#" rel="tooltip" title="Attend Test" class="btn btn-default"><i class="fa fa-check fa-fw"></i>Going To Attend Test</a> </div>
<!-- /.btn-group -->
</div>
<!-- /.pull-right -->
<h5 class="media-heading"><a href="#">Purchase 4 items ($80)</a></h5>
<div class="text-muted"> <small><i class="fa fa-user fa-fw"></i> Rose Davies</small>&nbsp;&nbsp;&nbsp; <small><i class="fa fa-user fa-fw"></i> 16 minutes</small> </div>
</div>
<!-- /.media-body -->
</div>
<!-- /.media -->
<hr>
<div class="media"> <a class="pull-left kit-avatar kit-avatar-36" href="#"> <img class="media-object" src="images/dummy/uifaces2.jpg" alt=""> </a>
<div class="media-body">
<div class="pull-right">
<div class="btn-group btn-group-xs"> <a href="#" rel="tooltip" title="approve" class="btn btn-default"><i class="fa fa-check fa-fw"></i></a> <a href="#" rel="tooltip" title="invoice" class="btn btn-default"><i class="fa fa-credit-card fa-fw"></i></a> <a href="#" rel="tooltip" title="delete" class="btn btn-default"><i class="fa fa-times fa-fw"></i></a> </div>
<!-- /.btn-group -->
</div>
<!-- /.pull-right -->
<h5 class="media-heading"><a href="#">Purchase an item - Wrapkit Admin Template</a></h5>
<div class="text-muted"> <small><i class="fa fa-user fa-fw"></i> Dilara Elmas</small>&nbsp;&nbsp;&nbsp; <small><i class="fa fa-user fa-fw"></i> 20 minutes</small> </div>
</div>
<!-- /.media-body -->
</div>
<!-- /.media -->
<hr>
<div class="media"> <a class="pull-left kit-avatar kit-avatar-36" href="#"> <img class="media-object" src="images/dummy/uifaces3.jpg" alt=""> </a>
<div class="media-body">
<div class="pull-right">
<div class="btn-group btn-group-xs"> <a href="#" rel="tooltip" title="approve" class="btn btn-default"><i class="fa fa-check fa-fw"></i></a> <a href="#" rel="tooltip" title="invoice" class="btn btn-default"><i class="fa fa-credit-card fa-fw"></i></a> <a href="#" rel="tooltip" title="delete" class="btn btn-default"><i class="fa fa-times fa-fw"></i></a> </div>
<!-- /.btn-group -->
</div>
<!-- /.pull-right -->
<h5 class="media-heading"><a href="#">Payment for invoice #141213</a></h5>
<div class="text-muted"> <small><i class="fa fa-user fa-fw"></i> George Florianu</small>&nbsp;&nbsp;&nbsp; <small><i class="fa fa-user fa-fw"></i> 42 minutes</small> </div>
</div>
<!-- /.media-body -->
</div>
<!-- /.media -->
<hr>
<div class="media"> <a class="pull-left kit-avatar kit-avatar-36" href="#"> <img class="media-object" src="images/dummy/uifaces4.jpg" alt=""> </a>
<div class="media-body">
<div class="pull-right">
<div class="btn-group btn-group-xs"> <a href="#" rel="tooltip" title="approve" class="btn btn-default"><i class="fa fa-check fa-fw"></i></a> <a href="#" rel="tooltip" title="invoice" class="btn btn-default"><i class="fa fa-credit-card fa-fw"></i></a> <a href="#" rel="tooltip" title="delete" class="btn btn-default"><i class="fa fa-times fa-fw"></i></a> </div>
<!-- /.btn-group -->
</div>
<!-- /.pull-right -->
<h5 class="media-heading"><a href="#">Purchase an item - Wrapkit Admin Template</a></h5>
<div class="text-muted"> <small><i class="fa fa-user fa-fw"></i> Gustavo Francisco</small>&nbsp;&nbsp;&nbsp; <small><i class="fa fa-user fa-fw"></i> 1 hours</small> </div>
</div>
<!-- /.media-body -->
</div>
<!-- /.media -->
<hr>
<div class="media"> <a class="pull-left kit-avatar kit-avatar-36" href="#"> <img class="media-object" src="images/dummy/uifaces5.jpg" alt=""> </a>
<div class="media-body">
<div class="pull-right">
<div class="btn-group btn-group-xs"> <a href="#" rel="tooltip" title="approve" class="btn btn-default"><i class="fa fa-check fa-fw"></i></a> <a href="#" rel="tooltip" title="invoice" class="btn btn-default"><i class="fa fa-credit-card fa-fw"></i></a> <a href="#" rel="tooltip" title="delete" class="btn btn-default"><i class="fa fa-times fa-fw"></i></a> </div>
<!-- /.btn-group -->
</div>
<!-- /.pull-right -->
<h5 class="media-heading"><a href="#">Purchase an item - Wrapkit Admin Template</a></h5>
<div class="text-muted"> <small><i class="fa fa-user fa-fw"></i> Bastien Guichard</small>&nbsp;&nbsp;&nbsp; <small><i class="fa fa-user fa-fw"></i> 1 hours</small> </div>
</div>
<!-- /.media-body -->
</div>
<!-- /.media -->
</div>


I have used ng-repeat only in
table data
. Is it possible to populate the whole object and repeat it iterating.

Answer

You can do this in a way similar to below:

<div class="media" ng-repeat="media in mediaList track by $index"> <a class="pull-left kit-avatar kit-avatar-36" href="#"> <img class="media-object" src="images/dummy/uifaces1.jpg" alt=""> </a>
  <div class="media-body">
    <div class="pull-right">
      <div class="btn-group btn-group-xs"> <a href="#" rel="tooltip" title="Attend Test" class="btn btn-default"><i class="fa fa-check fa-fw"></i>{{media.text1}}</a> </div>
      <!-- /.btn-group --> 
    </div>
    <!-- /.pull-right -->
    <h5 class="media-heading"><a href="#">{{media.text2}}</a></h5>
    <div class="text-muted"> <small><i class="fa fa-user fa-fw"></i>{{media.text3}}</small>&nbsp;&nbsp;&nbsp; <small><i class="fa fa-user fa-fw"></i>{{media.text4}}</small> </div>
  </div>
  <!-- /.media-body --> 
</div>
Comments