角度多重滤波器

时间:2016-08-03 09:21:01

标签: javascript jquery angularjs

我想创建特定的自定义过滤器,它将通过" colors"过滤对象。我有更大的对象,但在这种情况下,我创建了一个小的只是为了告诉你是什么问题,所以我有这样的json:

grid.recordHeight = 40; // height in pixels

我在视图中也有多个选择

[
  {
    "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"
  }
]

并且在控制器中是:

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

我想要达到的目标是 - 如果有人只选择白色&#39;选项仅显示具有白色&#39;的产品。颜色,如果客户选择白色&#39;和&#39;蓝色&#39;它应该展示的产品只有白色和蓝色,但产品也有[&#39;白色&#39;蓝色&#39;]。 我陷入困境:)并且不知道如何编写我的过滤器来实现这一目标。请帮忙;)

1 个答案:

答案 0 :(得分:0)

所以我通过尝试不同的东西实现了我想要的东西:)这是未来使用的代码:

控制器

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;
        }

    }
});

查看

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

并将过滤器放入ng-repeat元素

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