AngularJS: Ng-repeat in groups of n elements

Question

I have a set of such data:

$scope.items = [
    { model:"A", price: 100, quantity: 30}, 
    { model:"B", price: 90, quantity: 20 },
    { model:"C", price: 80, quantity: 200 }, 
    { model:"D", price: 70, quantity: 20 },
    { model:"E", price: 60, quantity: 100 }, 
    { model:"F", price: 50, quantity: 70 },
    { model:"G", price: 40, quantity: 230 }, 
    { model:"H", price: 30, quantity: 50 }
];

I would like to use ng-repeat, but then create groups of 4, so the output will be something like this

<ul>
    <li> model:"A", price: 100, quantity: 30</li>
    <li> model:"B", price: 90, quantity: 20</li>
    <li> model:"C", price: 80, quantity: 200</li>
    <li> model:"D", price: 70, quantity: 20</li>
</ul>
<ul>
    <li> model:"E", price: 60, quantity: 100</li>
    <li> model:"F", price: 50, quantity: 70</li>
    <li> model:"G", price: 40, quantity: 230</li>
    <li> model:"H", price: 30, quantity: 50</li>
</ul>

And then be able to sort by price and quantity. I tried using

<li ng-repeat="x in items.slice(0,4)">

but then I can sort in each group. Also, I am looking for a solution that can work for any number of elements. This proposed solution. The ng-repeat items group works when you know in advance the number of items you will have.

PS: I try not to use the pagination directive as this gives me a conflict with another script.

Thanks in advance!

Answer 1

lodash (_.sortBy _.chunk), , , :

https://jsfiddle.net/1LLf7gz6/

, :

$scope.itemssorted = _.sortBy($scope.items, 'price');

:

$scope.itemschunk = _.chunk(_.sortBy($scope.items, 'price'), 4);

jsfiddle (new): https://jsfiddle.net/py5hs1yj/

jsfiddle : https://jsfiddle.net/Ldcpx35w/

:

._ sortBy() → https://lodash.com/docs#sortBy ._chunk() → https://lodash.com/docs#chunk

jsfiddle:

Script:

var app = angular.module('anExample', []);

app.controller('theController', ['$scope',function($scope){
    $scope.test = 'this is a test';

  $scope.items = [
    { model:"A", price: 100, quantity: 30}, 
    { model:"B", price: 90, quantity: 20 },
    { model:"C", price: 80, quantity: 200 }, 
    { model:"D", price: 70, quantity: 20 },
    { model:"E", price: 60, quantity: 100 }, 
    { model:"F", price: 50, quantity: 70 },
    { model:"G", price: 40, quantity: 230 }, 
    { model:"H", price: 30, quantity: 50 }
    ];

  //$scope.itemssorted = _.sortBy($scope.items, 'price');
  //example: reverse array
  //$scope.itemssorted = _.sortBy($scope.items, 'price').reverse();

  $scope.itemschunk = _.chunk(_.sortBy($scope.items, 'price'), 4);


  console.log("items: ", $scope.items);
  console.log("items chunked: ", $scope.itemschunk);
  //console.log("items sorted: ", $scope.itemssorted);

}]);

HTML:

<div ng-app="anExample" ng-controller="theController">

    Hello, {{test}}!
    <ul ng-repeat="group in itemschunk">
      <li ng-repeat="items in group"> Model: {{items.model}}, price: {{items.price}}, quantity: {{items.quantity}}</li>
    </ul>

</div>

:

Hello, this is a test!

Model: H, price: 30, quantity: 50
Model: G, price: 40, quantity: 230
Model: F, price: 50, quantity: 70
Model: E, price: 60, quantity: 100

Model: D, price: 70, quantity: 20
Model: C, price: 80, quantity: 200
Model: B, price: 90, quantity: 20
Model: A, price: 100, quantity: 30

Answer 2

. ng-repeat orderBy.

$scope.items = [
  { model:"A", price: 100, quantity: 30}, 
  { model:"B", price: 90, quantity: 20 },
  { model:"C", price: 80, quantity: 200 }, 
  { model:"D", price: 70, quantity: 20 },
  { model:"E", price: 60, quantity: 100 }, 
  { model:"F", price: 50, quantity: 70 },
  { model:"G", price: 40, quantity: 230 }, 
  { model:"H", price: 30, quantity: 50 }
];

$scope.groupedItems = _groupItems($scope.items, 4, 'price');

function _groupItems (items, size, sort) {
  var grouped = [],
      index = 0;

  if (angular.isDefined(sort)) {
    $filter('orderBy')(items, sort);
  }

  for (var i = 0; i < items.length; i++) {
    if (angular.isUndefined(grouped[index])) {
      grouped[index] = [];
    }

    grouped[index].push(items[i]);

    if ((i+1) % size === 0) {
      index++;
    }
  }

  return grouped;
}

<ul ng-repeat="group in groupedItems">
  <li ng-repeat="item in group | orderBy:'price'">
    model:"{{item.model}}", price:{{item.price}}, quantity: {{item.quantity}}
  </li>
</ul>