我有这样的 JSON 数组:
[
{
"Variants": [],
"SubCategoryID": "53",
"ProductImagePath": "/images/quaker/1247.png",
"SubCategoryName": "Oats",
"BrandName": "Quaker",
"ProductID": "1247",
"BrandID": "229",
"ProductName": "Oats - Home Style Masala"
},
{
"Variants": [],
"SubCategoryID": "53",
"ProductImagePath": "/images/quaker/1247.png",
"SubCategoryName": "Oats",
"BrandName": "Suffola",
"ProductID": "1047",
"BrandID": "129",
"ProductName": "Oats - Home Style Masala"
},
{
"Variants": [],
"SubCategoryID": "53",
"ProductImagePath": "/images/quaker/1246.png",
"SubCategoryName": "Oats",
"BrandName": "Quaker",
"ProductID": "1246",
"BrandID": "229",
"ProductName": "Oats - Kesar Flavour with Kismis"
},
{
"Variants": [],
"SubCategoryID": "53",
"ProductImagePath": "/images/quaker/1246.png",
"SubCategoryName": "Oats",
"BrandName": "Suffola",
"ProductID": "1046",
"BrandID": "129",
"ProductName": "Oats - Kesar Flavour with Kismis"
},
{
"Variants": [],
"SubCategoryID": "53",
"ProductImagePath": "/images/quaker/1245.png",
"SubCategoryName": "Oats",
"BrandName": "Quaker",
"ProductID": "1245",
"BrandID": "229",
"ProductName": "Oats - Multigrain Advantage"
},
{
"Variants": [],
"SubCategoryID": "53",
"ProductImagePath": "/images/quaker/1245.png",
"SubCategoryName": "Oats",
"BrandName": "Suffola",
"ProductID": "1045",
"BrandID": "129",
"ProductName": "Oats - Multigrain Advantage"
},
{
"Variants": [],
"SubCategoryID": "38",
"ProductImagePath": "/images/dry_fruits/walnut.jpg",
"SubCategoryName": "Dry Fruits",
"BrandName": "Quality Plus",
"ProductID": "24",
"BrandID": "58",
"ProductName": "Chestnut (Akhrot Gota)"
},
{
"Variants": [],
"SubCategoryID": "38",
"ProductImagePath": "/images/dry_fruits/walnut.jpg",
"SubCategoryName": "Dry Fruits",
"BrandName": "Quality Plus",
"ProductID": "24",
"BrandID": "58",
"ProductName": "Chestnut -2 (Akhrot Gota)"
},
{
"Variants": [],
"SubCategoryID": "38",
"ProductImagePath": "/images/dry_fruits/walnut.jpg",
"SubCategoryName": "Dry Fruits",
"BrandName": "Quality Plus",
"ProductID": "24",
"BrandID": "58",
"ProductName": "Chestnut -3 (Akhrot Gota)"
}
]
我们可以使用以下方法显示特定子类别的产品:
<div class='box' ng-repeat="product in pc.ProductService.Products | filter:FilterExpr:true | orderBy:'ProductName'">
<!-- Code to display the products -->
</div>
我在选择子类别时在 JavaScript 中设置 FilterExpr 的位置:
$scope.FilterExpr = {'SubCategoryID': $stateParams.SCID.toString()};
例如 - 选择 SubCategoryID = 53 时,产品将显示如下:
"BrandName": "Quaker",
"ProductName": "Oats - Home Style Masala"
"BrandName": "Suffola",
"ProductName": "Oats - Home Style Masala"
"BrandName": "Quaker",
"ProductName": "Oats - Kesar Flavour with Kismis"
"BrandName": "Suffola",
"ProductName": "Oats - Kesar Flavour with Kismis"
"BrandName": "Quaker",
"ProductName": "Oats - Multigrain Advantage"
"BrandName": "Suffola",
"ProductName": "Oats - Multigrain Advantage"
但我还想按品牌名称对它们进行分组,这意味着所选子类别中特定品牌的所有产品必须一起显示:
"BrandName": "Quaker",
"ProductName": "Oats - Home Style Masala"
"BrandName": "Quaker",
"ProductName": "Oats - Kesar Flavour with Kismis"
"BrandName": "Quaker",
"ProductName": "Oats - Multigrain Advantage"
"BrandName": "Suffola",
"ProductName": "Oats - Home Style Masala"
"BrandName": "Suffola",
"ProductName": "Oats - Kesar Flavour with Kismis"
"BrandName": "Suffola",
"ProductName": "Oats - Multigrain Advantage"
如何做到这一点?
最佳答案
尝试使用分组依据
<div class='box' ng-repeat="product in pc.ProductService.Products | filter:FilterExpr:true | groupBy:'BrandName' | orderBy:'ProductName'">
<!-- Code to display the products -->
</div>
app.filter('groupBy', function() {
return _.memoize(function(items, field) {
return _.groupBy(items, field);
}
);
});
关于javascript - 如何在单循环中过滤和分组 AngularJS 中的产品,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31655644/