Question

我有这样的json数据：

  [  
     {  
       "id":1,
        "brand":"Apple",
        "model":"Iphone 5",
        "os":"macOs"
     },
     {  
        "id":2,
        "brand":"Apple",
        "model":"Iphone 6",
        "os":"macOs"
     },
     {  
        "id":3,
        "brand":"Samsung",
        "model":"Samsung Galaxy",
        "os":"Android"
     },
     {  
        "id":4,
        "brand":"Meizu",
        "model":"Meizu M2 note",
        "os":"Android"
      }
    ]

我需要构建这样的输入字段过滤器，所以如果我输入'Android Meizu'那么它应该找到'魅族'项目。基本上它应该与这个插件完全相同：http://plnkr.co/edit/kozaU39E74yqjZCpgDqM?p=preview但我需要在一个输入字段中完成所有这些。

感谢您的帮助！

Answer 1

这里重点是，要实现如何查找/过滤掉与输入匹配的对象的逻辑，无论是在不同的属性中还是在单个属性中，一旦你能够编写逻辑，就没有什么大不了的创建一个角度过滤器。

这里我正在编写一个过滤器，假设您的对象具有扁平结构。由于您希望在对象中找到所有令牌时进行过滤，例如"Android Meizu"会在某些字段中返回"Android"的对象，在某些字段中返回"Meizu"，或"Android Meizu" al在某个领域中，我们将它拆分，然后检查一下，如果所有标记都是对象的任何值的一部分，我们可以采用该对象，这样两个标准都是完整的。这是一个应该工作的代码示例

.filter('detailSearch', function() {
    return function(input, filterStr) {
        //this will split to strings by space, if space is not there
        //still it will wrap in array the single element 
        //the filter will remove empty strings if multiple spaces are there 
        var tokens = filterStr.split(" ").filter(function(s) {
            return s
        });
        var op = input.filter(function(obj) {
            //taking valuesassuming your object having flat structure,
            //if all not strings converted to string and lower case
            var values = Object.values(obj).map(function(v) {
                return v.toString().toLowerCase()
            });
            var keysExistsInObj = tokens.filter(function(key) {
                return values.some(function(v) {
                    return v.includes(key.toLowerCase())
                });
            });
            //checking for all tokens exists
            return keysExistsInObj.length === tokens.length;
        });
        return op;
    }
})

评论是否有任何不明确的内容。

Answer 2

这是angular 2实现，其中IProduct []是我的json输入的接口

import { Pipe, PipeTransform } from '@angular/core';

import { IProduct } from '../products/product';
@Pipe({

  name:'productFilter'
})
export class ProductFilterPipe implements PipeTransform{

  transform(value: IProduct[], filterBy: string): IProduct[] {
      filterBy = filterBy ? filterBy.toLocaleLowerCase() : null;
      return filterBy ? value.filter((product: IProduct) =>
          product.productName.toLocaleLowerCase().indexOf(filterBy) !== -1) : value;
  }


}

您可以在此网址上看到此操作 https://rahulcvng2.netlify.com/products

具有多个参数的角度输入滤波器

2 个答案: