我有一组这样的数据:
$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 个一组,所以输出会是这样的
<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>
然后能够按价格和数量对其进行排序。我试过
<li ng-repeat="x in items.slice(0,4)">
但是我只能在每个组中进行排序。此外,我正在寻找一种适用于任何给定数量元素的解决方案。这个建议的解决方案 Group ng-repeat items仅当您事先知道您将拥有的元素数量时才工作。
PS:我尽量不使用分页指令,因为它会与其他脚本发生冲突。
提前致谢!
最佳答案
使用 lodash(_.sortBy 和 _.chunk)创建了一个示例,它不是最好的但总比没有好:
https://jsfiddle.net/1LLf7gz6/
您还可以通过删除来缩短:
$scope.itemssorted = _.sortBy($scope.items, 'price');
并添加:
$scope.itemschunk = _.chunk(_.sortBy($scope.items, 'price'), 4);
jsfiddle(新):https://jsfiddle.net/py5hs1yj/
带有排序按钮的 jsfiddle 示例:https://jsfiddle.net/Ldcpx35w/
文档:
._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
关于javascript - AngularJS:Ng-repeat in groups of n elements,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35441885/