angularjs – 限制ng-repeat的行数

发布时间：2020-12-17 07:09:11 所属栏目：安全来源：网络整理

导读：我想在ng-repeat的表格中显示最多4行.如果有超过4行,我希望在第5行显示一个加号,单击该行时,将显示数据集中的其余行.我不确定从哪里开始. table.table.table-striped.table-bordered thead tr th.spacer.col-md-8 | Products: {{co.products.length}} Total

我想在ng-repeat的表格中显示最多4行.如果有超过4行,我希望在第5行显示一个加号,单击该行时,将显示数据集中的其余行.我不确定从哪里开始.

table.table.table-striped.table-bordered
  thead
    tr
      th.spacer.col-md-8
        | Products: {{co.products.length}} Total - Click to preview
      th.col-md-2
        span.qty-ordered Qty Ordered
      th.col-md-2
        span.co-price Price
  tbody
    tr ng-repeat="prod in co.products"
        td.co-product-name.col-md-6
          a () {{prod.name}}
        td.col-md-3
          span () XX
        td.col-md-3
          span () {{prod.prices[0].price | currency}}

解决方法

使用限制过滤器：

tr ng-repeat="prod in co.products | limitTo : limit"
    td.co-product-name.col-md-6
      a () {{prod.name}}
    td.col-md-3
      span () XX
    td.col-md-3
      span () {{prod.prices[0].price | currency}}
tr ng-show='limit' ng-click='limit = undefined'



# controller

$scope.limit = 4;

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!