可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):
问题:
I have a set of data 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 } ];
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)">
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: I'm trying not to use the pagination directive as it gives me a conflict with other script.
Thanks in advance!
回答1:
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');
and add this:
$scope.itemschunk = _.chunk(_.sortBy($scope.items, 'price'), 4);
jsfiddle (new): https://jsfiddle.net/py5hs1yj/
jsfiddle with sort buttons example: https://jsfiddle.net/Ldcpx35w/
Documentation:
._sortBy() -> https://lodash.com/docs#sortBy ._chunk() -> https://lodash.com/docs#chunk
jsfiddle code:
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>
Result:
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
回答2:
First group your data in the controller, Then you can use nested ng-repeat in your view and apply your orderBy clause.
Controller
$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; }
View
<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>
