如何在单循环中过滤和分组angularjs中的产品

How to filter and group products in angularjs in single loop

本文关键字：angularjs 单循环 过滤      更新时间：2023-09-26

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"

怎么做??

试试group by

<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);
        }
    );
});
http://jsfiddle.net/TD7t3/

相关文章：