AngularJS:N个元素组中的Ng-repeat [英] AngularJS: Ng-repeat in groups of n elements

问题描述

我有一组这样的数据:

$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 }
];

我想使用ng-repeat，然后将其分成4组，所以输出将是这样的

I would like use ng-repeat but then making groups of 4, so the output would 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 it by price and quantity. I've tried with

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

但是，我只能在每个组中进行排序.另外，我正在寻找一种适用于任何给定数量元素的解决方案.提议的解决方案分组ng-重复项仅在您事先知道您将拥有.

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

PS:我正在尝试不使用分页指令，因为它使我与其他脚本发生冲突.

PS: I'm trying not to use the pagination directive as it gives me a conflict with other script.

提前谢谢！

推荐答案

使用lodash(_.sortBy和_.chunk)创建了一个示例，它不是最好的，但总比没有好:

created an example using lodash (_.sortBy and _.chunk), it's not the best but better than nothing:

https://jsfiddle.net/1LLf7gz6/

您还可以通过删除以下内容来缩短:

you can also shorten by removing:

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

并添加以下内容:

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

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

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

带有排序按钮的jsfiddle示例: https://jsfiddle.net/Ldcpx35w/

jsfiddle with sort buttons example: https://jsfiddle.net/Ldcpx35w/

文档:

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

._sortBy() -> https://lodash.com/docs#sortBy ._chunk() -> https://lodash.com/docs#chunk

jsfiddle代码:

脚本:

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

这篇关于AngularJS:N个元素组中的Ng-repeat的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！