I am facing a challenge with a data set structured like this:
$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 }
];
My goal is to utilize ng-repeat while grouping the items in sets of 4, resulting in an output similar to 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>
Furthermore, I aim to implement sorting by both price and quantity. While I attempted to achieve this using the ng-repeat directive within a limited slice range, it only allowed me to sort within each group. Additionally, I am seeking a solution that can adapt to any number of elements dynamically. The suggested approach mentioned in this Stack Overflow post relies on knowing the exact number of items beforehand.
Note: I prefer to avoid utilizing the pagination directive due to conflicts with other scripts.
Thank you for your assistance!