如何在單循環中對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

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