有没有办法避免使用ng-repeat。
为了解决这个问题,我使用选项limitTo
使用了两次ng-repeat来分别显示每个3个元素。
我想要做的是,插入我的元素并在每个3个元素之后,我添加
<div class="row"> </div>
以下是我的代码:
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="row l-b-margin">
<div class="col-md-4" ng-repeat="name in Courses|limitTo:3">
<div class="well well-white">
<img alt="R Programming" class="center-block l-b-margin"
height="100" ng-src="{{name.logo}}" width="100" />
<h6 style="text-align: center; color: #516979; font-size: 21px">{{name.name}}</h6>
<p class="text-space l-b-margin">Write your first code here</p>
<a class="rounded-button cta-border-button center-block m-button"
href="courses/introduction-to-r">Start Course</a>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4" ng-repeat="name in Courses|limitTo:-3">
<div class="well well-white">
<img alt="Data Manipulation" class="center-block l-b-margin"
height="100" ng-src="{{name.logo}}" width="100" />
<h6 style="text-align: center; color: #516979; font-size: 21px">{{name.name}}</h6>
<p class="text-space l-b-margin">Write your first code here</p>
<a class="rounded-button cta-border-button center-block m-button"
href="courses/data-table-data-manipulation-r-tutorial">Start
Course</a>
</div>
</div>
</div>
</div>
</div>
答案 0 :(得分:1)
简单的方法是将($index+1)%3==0
与ng-if一起使用,并将以下元素放在ng-repeat的末尾。
<div class="row" ng-if="($index+1)%3==0"> </div>
Plunker
希望它有所帮助:)
答案 1 :(得分:0)
你似乎正在做的是试图阻止这种情况发生:(如果不是所有人都有相同的高度,某些街区将转移到下一行)
如果是这种情况你可以(并且应该))通过简单的css修复它:(只需在迭代中添加一个自定义类)
.my-block:nth-child(3n+1) {
clear: left;
}