panatoni panatoni - 4 months ago 43
AngularJS Question

Angular multiple filter

I want to create specific custom filter which will filter object by "colors" I have bigger object but for this case I created small one only to show you what is the issue so I have json like this:

[
{
"nazwa": "koszule",
"colors": [
"white"
],
"rozmiary": [],
"url": "/pl/p/koszule/3693",
"rodzaj": 2,
"img": "/images/nophoto_300x300.jpg",
"muszka": null,
"alt": "koszule"
},
{
"nazwa": "koszule",
"colors": [
"blue"
],
"rozmiary": [],
"url": "/pl/p/koszule/3693",
"rodzaj": 2,
"img": "/images/nophoto_300x300.jpg",
"muszka": null,
"alt": "koszule"
},
{
"nazwa": "koszule",
"colors": [
"white",
"blue"
],
"rozmiary": [],
"url": "/pl/p/koszule/3693",
"rodzaj": 2,
"img": "/images/nophoto_300x300.jpg",
"muszka": null,
"alt": "koszule"
}
]


I also have multiple select in my view

<md-input-container class="md-block" flex-gt-sm>
<md-select ng-change="checkColors()" ng-model="kolorEnd" multiple>
<md-optgroup label="<?php echo $this->translate('kolory'); ?>">
<md-option ng-value="unikalneKoloryWidok" ng-repeat="unikalneKoloryWidok in unikalneKolory | orderBy : expression">{{unikalneKoloryWidok}} </md-option>
</md-optgroup>
</md-select>
</md-input-container>


and in controller is:

$scope.dataParsed = angular.fromJson(prdData);
angular.forEach($scope.dataParsed , function(item , i) {
angular.forEach(item.kolory , function(item , i) {
wszystkieKolory.push(item);
});
});
$scope.unikalneKolory = $.unique(wszystkieKolory);

$scope.checkColors = function(){
$scope.$watch('kolorEnd' , function(oldv,newv) {
$scope.kolory = oldv.toString();
});
};
frost.filter('colorsFlt' , function(){
return function(data,inpArray) {
var output = [];
if (angular.isArray(inpArray)) {


}
}


What I want to achieve is - if someone select only 'white' option show only products which has 'white' color, if customer select 'white' and 'blue' it supposed to show products which has only white and only blue but also products which has ['white','blue'].
I am in a trap:) And don't know how to write my filter to achieve this. Please help;)

Answer

So I achieved what I wanted by trying different things:) here is the code in future use:

controller

frost.filter('megaFlt' , function(){
    return function(data,firstarg , secarg , filtertype) {
        var output = [];
        if (angular.isString(firstarg) || angular.isString(secarg)) {
                angular.forEach(data,function(el,j) {
                    $.map(el[filtertype],function(test,i){
                        if(test == firstarg || test == secarg ) {
                            return output.push(data[j]);
                        }
                    });
                });
            return output;
        }
        else {
            return data;
        }

    }
});

view

   <md-input-container class="md-block" flex-gt-sm>
                    <md-select ng-change="checkColors()" ng-model="kolorEnd" multiple>
                        <md-optgroup label="<?php echo $this->translate('kolory'); ?>">
                            <md-option  ng-value="unikalneKoloryWidok" ng-repeat="unikalneKoloryWidok in unikalneKolory | orderBy : expression">{{unikalneKoloryWidok}}  </md-option>
                        </md-optgroup>
                    </md-select>
                </md-input-container>

and put filter in ng-repeat element

| megaFlt:kolorEnd[0]:kolorEnd[1]:'kolory'