Javascript AngularJS动态筛选器配置无法解决

我是AngularJS的新手，对KnockoutJS也有一定的了解

我正在尝试在我的ViewModel中的“产品”上实现一个搜索功能，该功能可由最终用户通过组合进行配置

• 按产品的“名称”搜索
• 按产品的“标签”搜索

结合搜索操作

• 包含
• 开始于
• 相等于

我相信你理解我试图建立的功能

下面是我正在使用的ViewModel

var InstantSearchController = function ($scope) {
    var self = this;

    $scope.filtersAvailable = [
        {
            displayText: 'Tag',
            filterMethod: 'tagFilter',
            description: 'Filter by Tags'
        },
        {
            displayText: 'Description',
            filterMethod: 'descriptionFilter',
            description: 'Filter by description'
        }
    ];
    $scope.selectedFilter = $scope.filtersAvailable[1];

    $scope.filterBehaviorsAvailable = [
            {
                displayText: 'CONTAINS',
                regexPrefix: '',
                regexPostfix: ''
            },
            {
                displayText: 'STARTS WITH',
                regexPrefix: '^',
                regexPostfix: ''
            },
            {
                displayText: 'EQUALS',
                regexPrefix: '^',
                regexPostfix: '$'
            }
    ];
    $scope.selectedFilterBehavior = $scope.filterBehaviorsAvailable[0];

    $scope.products = [
        {
            name: 'Household Product',
            description: 'Description household',
            tags: ['personal', 'home']
        },
        {
            name: 'Office product',
            description: 'Business equipments',
            tags: ['office', 'operations', 'business']
        },
        {
            name: 'Misc products',
            description: 'Uncategorized items',
            tags: ['noclass']
        }
    ];
}

下面是我的过滤器列表

   var app = angular.module('InstantSearchModule', []);

//FILTERS BEGIN
app.filter('descriptionFilter', function () {
    var filterFunction = function (data, filterBy) {
        if (filterBy == null || filterBy === '')
            return data;

        var filtered = [];
        var regExp = new RegExp(filterBy, 'gi');
        angular.forEach(data, function (item) {
            if (item.description.match(regExp))
                filtered.push(item);
        });

        return filtered;
    };
    return filterFunction;
});

app.filter('tagFilter', function () {
    var tagFilter = function (data, filterBy) {
        if (filterBy == null || filterBy === '')
            return data;

        var filtered = [];
        var regExp = new RegExp('^' + filterBy, 'gi');

        debugger;
        angular.forEach(data, function (item) {
            var isMatching = false;
            angular.forEach(item.tags, function (t) {
                isMatching = isMatching || (t.match(regExp) != null);
            });

            if (isMatching)
                filtered.push(item);
        });

        return filtered;
    };

    return tagFilter;
});
// FILTERS END

我创建了一个工作部件来配置搜索条件，包括“filterString”（在文本框中）、搜索操作数[标记或描述]（使用选择列表）和搜索模式[以/contains/equals开头]（使用另一个选择列表）。如果我直接在AngularJS指令中指定过滤器函数（tagFilter或descriptionFilter），这两个过滤器都可以正常工作，如下所示

{{$index+1}}。{{p.name}}
{{p.description}}
{{t}

由于{{selectedFilter.filterMethod}正在成功地呈现该值，但显示了一个错误，因此我希望以下内容对我有用。请查看我尝试使用的HTML

{{$index+1}}。{{p.name}}
{{p.description}}
{{t}

我已经将我在Google Chrome开发者工具中收到的错误以及生成的HTML附加到主题上。请看下面。

---

正如您在HTML中看到的，filter方法没有解析，因此，它对我不起作用。你们知道我做错了什么吗？

你们的提琴不工作，还有其他错误，但过滤器没有加载的原因是你们使用了全局控制器功能，并且没有向应用程序模块注册以使注入工作。您的筛选器属于模块

InstantSearchModule

，但控制器不属于

尝试模块注册语法

app.controller('InstantSearchController',function($scope) {
});

请参见控制器上的角度指南

更新：事实证明，问题不在于依赖注入。这是因为您无法使用表达式动态更改筛选器。当我设置为“固定过滤器”时，它工作正常

你要么合并，要么找到一种方法进行选择过滤

看到我的修正了吗

---

如果我理解正确，您所需要的只是一种动态更改过滤器的方法。其他一切似乎都在起作用。 我不认为你可以使用你试图使用的语法，但是你可以制作第三个过滤器，注入另外两个过滤器，并根据你发送的参数选择正确的过滤器

新过滤器：

app.filter('multiFilter', function (descriptionFilterFilter, tagFilterFilter) {
    var filterFunction = function (data, filterBy, filterRegExp, selectedFilter) {
      if(selectedFilter.displayText === 'Description') {
        return descriptionFilterFilter(data, filterBy, filterRegExp);
      }
      else {
        return tagFilterFilter(data, filterBy, filterRegExp);
      }
    };
    return filterFunction;
});

如您所见，它还将filterRegExp和selectedFilter作为参数。我还更改了旧过滤器，将selectedFilter作为参数。 还要注意的是，您必须将“Filter”附加到过滤器名称之后才能将其注入

您可以这样调用新过滤器

 multiFilter:filterString:filterRegExp:selectedFilter

<div data-ng-repeat="p in products|multiFilter:filterString:filterRegExp:selectedFilter|orderBy:'description.length'"
    title="{{selectedFilter.filterMethod}}">        
    <h4 style="margin-bottom: 5px">{{$index+1}}.&nbsp;{{p.name}}</h4>
    <div>

所以这个部门可以做这样的事情

 multiFilter:filterString:filterRegExp:selectedFilter

<div data-ng-repeat="p in products|multiFilter:filterString:filterRegExp:selectedFilter|orderBy:'description.length'"
    title="{{selectedFilter.filterMethod}}">        
    <h4 style="margin-bottom: 5px">{{$index+1}}.&nbsp;{{p.name}}</h4>
    <div>

{{$index+1}}。{{p.name}}

---

我为您的

制作了一个工作叉，您在哪里向模块注册了InstantSearchController。它在小提琴中。我的JS代码的第一行。我的坏。。我不知道有这样的注册程序。你能引导我吗？让我检查一下。谢谢你抽出时间。我不知道全局控制器和注册存在，因为这只是我和AngularJS的第二天。还在学习。阅读文档总是有帮助的：）我在本地尝试过，但它说的是循环依赖。你能编辑一下我的小提琴吗？实际上，fiddle（）是工作的，但是没有实现动态搜索。谢谢，Edminsson。我把你的更改集成到我的解决方案中，因为我昨天做了更多的更改，留下了一个过滤器，硬编码。现在运行良好。非常感谢你。非常感谢。：）