实现具有多属性Angular 5的过滤器 - javascript

时间:2018-04-01 15:37:13

标签: javascript json angular filtering angular5

基本上我想实现一个多属性过滤器,它将过滤对象阵列,所以我开始创建一个函数multiFilter,接受一个过滤器对象,该对象将从可以选择多属性的最终用户中选择,如 品牌 颜色 名称

这个函数帮助我传递作为[arg1]的产品数组,并将对象过滤为[arg2],其中包含需要由最终用户过滤的值

    function multiFilter(array, filters) {
  let filterKeys = Object.keys(filters);
  // filters all elements passing the criteria
  return array.filter((item) => filterKeys.every((key) => (filters[key].indexOf(item[key]) !== -1)));
}


let products = 
[
  { name: "A", color: "pruple", size: 50 , brand : "nike", vendor : 'vendor 1 ' },

  { name: "A", color: "orange", size: 60 , brand : "nike", vendor : 'vendor 2 ' },

  { name: "A", color: "orange", size: 40 , brand : "nike", vendor : 'vendor 1 ' },

  { name: "A", color: "red", size: 50 , brand : "nike", vendor : 'vendor 1 ' },

  { name: "A", color: "red", size: 50 , brand : "nike", vendor : 'vendor 1 ' },

  { name: "A", color: "black", size: 50 , brand : "nike", vendor : 'vendor 1 ' },

  { name: "A", color: "black", size: 50 , brand : "nike", vendor : 'vendor 1 ' },

  { name: "B", color: "pruple", size: 50 , brand : "zara", vendor : 'vendor 2 ' },

  { name: "B", color: "orange", size: 60 , brand : "zara", vendor : 'vendor 2 ' },

  { name: "B", color: "orange", size: 40 , brand : "zara", vendor : 'vendor 2 ' },

  { name: "B", color: "red", size: 50 , brand : "zara", vendor : 'vendor 2 ' },

  { name: "B", color: "red", size: 50 , brand : "zara", vendor : 'vendor 2 ' },

  { name: "B", color: "black", size: 50 , brand : "zara", vendor : 'vendor 2 '},

  { name: "B", color: "black", size: 50 , brand : "zara", vendor : 'vendor 2 ' },
]
 
let filters = {

	 name : ["A","B"],

	 brand : ['nike','zara'],

 	 color: ["orange", "red" , 'black'],

 	 size: [40 , 70 , 50]

};

var filtered = multiFilter(products, filters);


console.info('Filtered');
console.log(filtered);

you can find the clear code screenshot from here !

The console result here ! 我的问题在这里如何将这个javascript逻辑转换为Angular 5

如何制作管理过滤器对象的复选框输入,并将检查过的输入传递给处理我的产品过滤器的多重过滤功能

so i started to implement that but can't solve it any help ! - check stackbitz

0 个答案:

没有答案