AngularJS过滤器不适用于来自2个不同键的多个单词 [英] AngularJS filter is not working for multiple words from 2 different keys

问题描述

这是一些示例JSON数据.

This is some of sample JSON data.

$scope.Products = [
{
    "Variants": [],
    "SubCategoryID": "66",
    "ProductImagePath": "/images/britannia/887.png",
    "SubCategoryName": "Butter",
    "BrandName": "Britannia",
    "ProductID": "887",
    "BrandID": "76",
    "ProductName": "Butter"
},
{
    "Variants": [],
    "SubCategoryID": "71",
    "ProductImagePath": "/images/amul/886.png",
    "SubCategoryName": "Cheese",
    "BrandName": "Amul",
    "ProductID": "886",
    "BrandID": "47",
    "ProductName": "cheese"
},
{
    "Variants": [],
    "SubCategoryID": "106",
    "ProductImagePath": "/images/amul/885.png",
    "SubCategoryName": "Curd",
    "BrandName": "Amul",
    "ProductID": "885",
    "BrandID": "47",
    "ProductName": "curd"
}
]

这就是我渲染到网页的方式.

And this is How i am rendering to webpage.

<div ng-if="SearchText" class='box' ng-repeat="product in Products | filter:FilterExpr | orderBy:'ProductName'">
    <ng-include src="'commonTemplate.html'"></ng-include>
</div>

页面中有一个搜索文本框.当用户开始在Serach文本框中输入内容时，我会像这样向FilterExpr赋值.

There is a search text box in page. When user start typing in serach text box i assigns value to FilterExpr like this.

$scope.$on('SearchTextChanged', function(event, SearchText) {

    if (SearchText.length >=3)  {
        $scope.FilterExpr = SearchText;
    }
});

当用户输入amul或奶酪或黄油时，它可以过滤产品.问题是，当用户输入amul curd或curd amul或butter britannia时，页面上没有产品显示.

When user type amul or cheese or butter, It is able to filter the products. Problem is when user types amul curd or curd amul or butter britannia, NO products are displaying on the page.

如何使其工作?我需要做些什么更改，以便能够过滤多个单词.

How to make it work? What change i need to do to so it is able to filter for multiple words.

推荐答案

默认的过滤器使用的默认的比较器非常简单.它查找确切的搜索字符串，并且不以任何方式解析搜索字符串.改善此问题的最简单方法是实现另一个 comparator ( doc )./p>

The default comparator used by the default filter is very simple. It looks for the exact searched string and does not parse the search string in any way. The simplest way to improve this is implementing another comparator (doc).

<div ng-if="SearchText" class='box' ng-repeat="product in Products | filter:FilterExpr:searchFuncComparator | orderBy:'ProductName'">
   <ng-include src="'commonTemplate.html'"></ng-include>
</div>

并在 $ scope 中添加比较器:

$scope.searchFuncComparator = function(actual, expected) {
    // compare actual with expected and return true if match
    // otherwise false
};

剩下的就是实现您上面喜欢的搜索方法了:)

All there is left is to implement you're favorite search method above :)

这篇关于AngularJS过滤器不适用于来自2个不同键的多个单词的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！