limit number of rows with ng-repeat

Question

Я хотел бы отобразить до 4 строк в таблице с помощью ng-repeat. Если есть более 4 строк, я хочу, чтобы в пятой строке появился знак плюса, который при щелчке откроет остальные строки в наборе данных. Я не уверен, с чего начать.

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

Answer 1

Использование ограничения фильтра:

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; 

Answer 2

Я хотел бы сделать это с помощью нг-если, что-то вроде этого:

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

Answer 3

Вы можете использовать $index свойство при условии.

логика будет в контроллере и шаблоне.

в контроллере:

$scope.notPlus = true; 

в шаблоне:

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

и далее ниже ссылки, которая будет переворачивать значение noPlus к ложному

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

Это будет выполнять СУХОЙ принцип и сделать код более управляемым

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