Question

我在Html和AngularJS中有下一个代码：

<div class='row'>
    <div class='col-md-6' ng-repeat='post in news'>
        <div class='post-content'>{{ post.title }}</div>
    </div>
</div>

现在，我需要的是每四个帖子推一行两列。

<div class='row'>
    <div class='col-md-6'>
        <div class='add-content'>Something</div>
    </div>
    <div class='col-md-6'>
        <div class='add-content'>Something</div>
    </div>
</div>

如何在AngularJS中执行此操作？

我想要的DOM结果是：

<div class='row'>
    <div class='col-md-6'>
        <div class='post-content'>POST TITLE</div>
    </div>
    <div class='col-md-6'>
        <div class='post-content'>POST TITLE</div>
    </div>
    <div class='col-md-6'>
        <div class='post-content'>POST TITLE</div>
    </div>
    <div class='col-md-6'>
        <div class='post-content'>POST TITLE</div>
    </div>
</div>
<div class='row'>
    <div class='col-md-6'>
       <div class='add-content'>Something</div>
    </div>
    <div class='col-md-6'>
        <div class='add-content'>Something</div>
    </div>
</div>
<div class='row'>
    <div class='col-md-6'>
        <div class='post-content'>POST TITLE</div>
    </div>
    <div class='col-md-6'>
        <div class='post-content'>POST TITLE</div>
    </div>
...

Answer 1

基本上你需要使用内置的$ index来跟踪它当前所在的索引。每四个项目暗示它应该可以被四整除。您还需要一个ng-if语句来确定应该在所述项目上添加dom片段。这也需要使用ng-repeat-start而不是ng-repeat。它很少使用，但为了这个目的，它应该工作。代码如下：

   <div class='row' ng-repeat-start="post in news" >
      <div class='post-content'>{{ post.title }}</div>
   </div> 
   <div class="row" ng-repeat-end  ng-if="($index +1 ) % 4 === 0" >
      <div class='col-md-6'>
        <div class='post-content'>POST TITLE</div>
      </div>
      <div class='col-md-6'>
        <div class='post-content'>POST TITLE</div>
      </div>
   </div>

每四个ng-repeat值插入一行包含两列

1 个答案: