0

参照用にここにjsfiddleを作成しました： http://jsfiddle.net/7gzDG/

 $scope.list = [{
        "Colors": ["Blue", "Eggplant", "Green", "Pink", "Yellow"],
            "Brand": "BRAND A",
            "Name": "Item 1"
    }, {
        "Colors": ["Black", "Dark Teal", "Eggplant"],
            "Brand": "BRAND A",
            "Name": "Item 2"
    }, {
        "Colors": ["Ivory", "Pink"],
            "Brand": "BRAND A",
            "Name": "Item 3"
    }, {
        "Colors": ["Black", "Brown", "Red", "White"],
            "Brand": "BRAND B",
            "Name": "Item 4"
    }];

私の製品の上にある

  1. 色の配列
  2. 特定のブランド

それぞれの個別のリストをチェックボックスとして作成できます。

myApp.filter('uniqueColors', function () {
    return function (list) {
        var colors = {};
        angular.forEach(list, function (obj) {
            angular.forEach(obj.Colors, function (color) {
                colors[color] = color;
            })
        });
        //console.log(colors);
        var uniqueColors = []
        for (var key in colors) {
            uniqueColors.push(key);
        }
        return uniqueColors;
    }
});

myApp.filter('uniqueBrands', function () {
    return function (list) {
        var brands = {};
        angular.forEach(list, function (obj) {
            brands[obj.Brand] = obj.Brand;
        });
        //console.log(brands);
        var uniqueBrands = []
        for (var key in brands) {
            uniqueBrands.push(key);
        }
        return uniqueBrands.sort();
    }
});

私の問題は、チェックしたときに元の結果セットをフィルタリングする方法がわからないことです。たとえば、「青」をチェックすると、青の色のすべての製品が残ります。

青と赤をチェックすると、青または赤のすべての製品が残ります。

ブランド A の青と赤をチェックすると、ブランド A のすべての製品に青または赤が含まれるようになります。

ご覧いただきありがとうございます。

4

1 に答える 1

0

これがあなたが探しているものかどうかわかりませんが、商品用に別のフィルターを作成しました。

http://jsfiddle.net/btcxV/3/

myApp.filter('filterProduct', function() {
return function(list, colorFilter, brandFilter) {
    var products = [];

    if((Object.keys(colorFilter).length == 0) && (Object.keys(brandFilter).length == 0))
        return list;

    angular.forEach(list, function(product) {  

      angular.forEach(product.Colors, function(color) {  

        if(colorFilter[color])
            products.push(product);
      });
      angular.forEach(product.Brands, function(brand) {  

        if(brandFilter[color])
            products.push(product);
      });            

    });

    return products;
}

});

于 2013-11-02T03:17:51.147 に答える