Question

我找到解决方案的最佳尝试是空洞的。基本上我想在我的html中做这样的事情：

    <div data-ng-repeat="tag in allTags">
  <h3>{{tag}}</h3>
  <uib-accordion>
    <div uib-accordion-group data-ng-repeat="item in displayItems | filter: tagFilter: tag">

tagFilter看起来像这样：

  $scope.tagFilter = function(item, tag) {
    if(item.tags.indexOf(tag) === -1) {
      return false;
    }
    return true;
  }

displayItems中的每个项目都是一个包含标签数组的对象，因此显示项目如下所示：

[
{ title: "Item 1 Title", body: "Some escaped HTML Content", tags: ["tag1", "tag2", "tag3"]}, 
{ title: "Item 2 Title", body: "Some escaped HTML Content", tags: ["tag2", "tag4"] }
]

我希望它出现在它所属的所有标题下。问题是我无法弄清楚如何正确传递＆＃39; tag＆＃39;到tagFilter。在上面的代码中，无论如何，codeFilter中的参数标记都等于0。

Answer 1

这里的问题实际上是Filter语法的语义。更具体地说，您在上面使用的语法是用于使用ngApp.filter(...)语法定义角度过滤器时...即，为整个应用程序注册的过滤器和可以在任何地方使用。在这种情况下，filter语句中的第3个参数是您要传递给已注册过滤器的值。

在您的情况下，您在控制器中定义过滤器功能，这会更改过滤器的工作方式。具体而言，您无法将动态值传递给控制器内的过滤器功能。当您使用函数作为filter表达式时，它具有以下签名：

function(value, index, array) {}

然后只通过函数名在filter语句中调用，所以：

array|filter:filterfunction - 没有参数或括号。

value是要过滤的当前项（在数组中）的值，index是数组中该项的索引，array是要过滤的整个数组。你不能＆＃34;传递＆＃34;此表达式的值，但如果适用，则可以使用控制器或范围变量。在您的情况下它不会，因为您要过滤的值在转发器内。

要实现您的目标，您需要将$scope.tagFilter变为实际的角度过滤器，如下所示：

ngApp.filter('tagFilter', function($filter)
{
        return function(items, searchValue)
        {   
            // initialize array to return
            var filtered = [];

            angular.forEach(items, function(obj)
            {
               // use filter to find matching tags (3rd param means EXACT search - set to False for wildcard match)
               var objFilter = ($filter("filter")(obj.tags, searchValue, true))[0];

               // If a matching tag was found, add it to the filtered array
               if (objFilter) filtered.push(obj);
            });

            return filtered;
        };
    });

以上假设您已将angular.module(...)引导程序保存到名为ngApp的变量中。注册此过滤器后，您当前的过滤器语法应按预期工作！

Answer 2

假设displayItems是一个数组，

<div uib-accordion-group data-ng-repeat="item in displayItems.filter(tagFilter(tag))" >

应该做的伎俩。

Answer 3

根据此博客帖子找出一种方法：https://toddmotto.com/everything-about-custom-filters-in-angular-js/

基本上我必须创建自己的自定义过滤器，而不是使用角度谓词过滤器

Javascript：

  ng.module('faq').filter(
    'tagFilter', function() {
      return function(items, tag) {
        return items.filter(function(item) {
          if(item.tags.indexOf(tag) === -1) {
            return false;
          }
          return true;
        });
      }
    }
  )

HTML：

<div uib-accordion-group data-ng-repeat="item in displayItems | tagFilter: tag">

仍然不知道为什么原版本无法正常工作，所以如果有人能够回答10分，那么。

AngularJS，访问过滤谓词中的ngRepeat值

3 个答案: