CODEWITHSUNDEEP
angularjsangularjs-ng-repeat
Mike Glaz
Mike Glaz

Reputation: 5382

limit number of rows with ng-repeat

I would like to display up to 4 rows in a table with ng-repeat. If there are more than 4 rows I want a plus sign to appear on the 5th row which, when clicked, will reveal the rest of the rows in the dataset. I'm not really sure where to start.

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}}

Upvotes: 3

Views: 5346

Answers (3)

BroiSatse
BroiSatse

Reputation: 44675

Use limit filter:

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;

Upvotes: 6

Sina Khelil
Sina Khelil

Reputation: 1991

You can use the $index property provided.

logic would be in controller and template.

in controller:

$scope.notPlus = true;

in template:

tr ng-repeat="prod in co.products" ng-if={{ notPlus and $index < 4}}

and further below a link that will flip the noPlus value to false

a ng-click={{notPlus = !notPlus}}

This will fulfill the DRY principle and make your code more manageable

table.table.table-striped.table-bordered
  thead
    tr
      th.spacer.col-md-8
        | Products: {{co.products.length}} Total - a ng-click={{notPlus = !notPlus}} 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" ng-if={{ notPlus and $index < 4}}
        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}}

Upvotes: 0

dekajoo
dekajoo

Reputation: 2102

I would do this using a ng-if, something like this:

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 ng-if="expanded"
    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}}

  tbody ng-if="!expanded"
    tr ng-repeat="prod in co.products.slice(0,4)"
        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-click="expanded = true" show me more...

Upvotes: 0

Related Questions