angular.js中的ng-repeat限制循环次数limtTo()(项目总结)

之前做项目的时候是用老的angular.js做的,之前循环遍历一直都是用ng-repeat,用ng-repeat的时候可以限制循环的次数,就是用limtTo,请看示例:

<div class="tgw-desc-lie">
            <div class="tgw-desc-lie-item tgw-padding15 tgw-borderBottom"
                 ng-repeat="item1 in item.list | limitTo: tgwitem.number"
                 ng-click="productDetailFn(item1.prod_code,item1.fund_type,item1.incometype,item1.fundsubtype,item1.is_baby)">
                 // ng-repeat="item1 in item.list | limitTo: tgwitem.number"
                <p class="g-fontSize15 g-marginBottom-5 g-width165 text-truncate g-marginauto" ng-bind="item1 | supportprivate : specialPsersons">稳健理财产品B</p>
                <p class="g-fontSize12 text-gray g-marginTop-10" ng-bind="item1.display_field | display_field">七日年化</p>
                <p class="g-fontSize18 g-marginBottom-2 g-marginTop-4" ng-class="item1.display_field | display_class : item1" ng-bind="item1.display_field | display_data : item1"></p>
                <p class="g-fontSize12 g-width180 g-marginTop-8 text-gray g-height17 text-truncate g-marginauto" ng-bind="item1.slogan">灵活存取,收益稳健</p>
                <p class=""></p>
            </div>
        </div>

// ng-repeat="item1 in item.list | limitTo: tgwitem.number"
直接用过滤器limtTo来限制,很不错。
但是angular.js升级到angular2.0之后就变了,改观很大。循环遍历现在用的是*ngFor,示例如下

<div class="hot-img-div">
  <div *ngFor="let i of showmusicList;let id = index" (click)="showList(i.discover_id)">
    <div *ngIf="id>2 === false">
      <img src={{i.discover_pic}} class="hot-music-img" >
      <p>{{i.discover_title}}</p>
    </div>
  </div>
</div>

就我想ngfor只循环3次,然后到了3次之后跳出循环,我现在用的是ngif去判断index的下标来的
但是在HTML中设置的话,可以这样:

 let i of showmusicList.slice(0,3)

可以迂回实现这种效果,这个目前好像这两种方法适合一些。

猜你喜欢

转载自blog.csdn.net/xiaolinlife/article/details/82832165