AngularJS过滤器不适用于来自2个不同键的多个单词

Question

这是一些示例JSON数据.

$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"
}
]

这就是我如何渲染到网页.

<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分配值.

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

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

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

如何使它工作？我需要做些什么改变,以便能够过滤多个单词.

Answer 1

默认comparator使用的默认filter值非常简单.它查找精确搜索的字符串,并且不以任何方式解析搜索字符串.最简单的改进方法是实现另一个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>

并添加comparator到$scope:

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

剩下的就是实现你最喜欢的搜索方法:)