javascript - 我必须对一堆 div 进行 ng-repeat。我怎样才能做到这一点

Question

我需要 ng-repeat 一堆 div 就像我在下面提到的那样。我想迭代并填充列表中的每个对象。在下面的代码中，他们为每个列表项做了单独的条目。但我希望从 Angular 对象中获取它。我绝对被困住了。这些对象将具有内容数据和指向该图片的链接。

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

我只在 table data 中使用了 ng-repeat。是否可以填充整个对象并重复迭代。

Answer 1

您可以通过类似于以下的方式执行此操作:

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