javascript - 如何在单循环中过滤和分组 AngularJS 中的产品

Question

我有这样的 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"

如何做到这一点？

Answer 1

尝试使用分组依据

<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/