在多次ng-repeat迭代后插入一个元素

时间:2015-06-25 12:49:18

标签: html angularjs

有没有办法避免使用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>

2 个答案:

答案 0 :(得分:1)

简单的方法是将($index+1)%3==0与ng-if一起使用,并将以下元素放在ng-repeat的末尾。

<div class="row" ng-if="($index+1)%3==0"> </div>

Plunker
希望它有所帮助:)

答案 1 :(得分:0)

你似乎正在做的是试图阻止这种情况发生:(如果不是所有人都有相同的高度,某些街区将转移到下一行) some blocks shifts if not all have equal heights

如果是这种情况你可以(并且应该))通过简单的css修复它:(只需在迭代中添加一个自定义类)

.my-block:nth-child(3n+1) {
  clear: left;
}