【问题标题】:Angular table filter on inner array of an object对象内部数组上的角度表过滤器
【发布时间】:2017-06-06 19:50:49
【问题描述】:

我是新的角度,我想做的是在表格行的对象的内部数组上应用过滤器,过滤器正在工作,但仅适用于该 td,而不适用于整个行,为什么会发生这种情况,是这里有什么遗漏吗?非常感谢任何帮助。

戳这里:http://plnkr.co/edit/lXxTS1A3zRCk6mdtw2JP?p=preview

【问题讨论】:

标签: javascript angularjs


【解决方案1】:

使用过滤器函数将第二个过滤器通过管道传输到您的项目列表: http://plnkr.co/edit/ydKDEUUWZcI0Qt9fQxhB?p=preview

$scope.applyToTitle = function (title)
  {
    if($scope.support.code.length !== 0)
    {
      for(var i=0; i<$scope.tableObject.length; i++)
      {
        for(var j=0; j<$scope.tableObject[i].details.length; j++)
        {
          if(title.details[j].code == $scope.support.code)
          {
            return title;
          }
        }
      }
    }
    else
    {
      return title;
    }
  }

并在 filter:search: 之后通过管道应用此过滤器:

<tr ng-repeat="item in tableObject | filter:search | filter: applyToTitle">
        <td>{{item.title}}</td>
...

【讨论】:

  • 谢谢,我们可以为 ng-repeat 应用过滤器是否有一定的限制?我从来不知道...
  • 我不这么认为,继续使用管道并添加更多。虽然前一个过滤器的结果将用作下一个过滤器的输入 - 类似于 unix 管道。
  • 好的,最后一件事如果我想在 subApp 而不是代码上应用过滤器怎么办?我尝试在 app.js 中将代码替换为 subApp,不起作用,知道为什么吗?
  • 您需要在每个列表上都有一个过滤器,包括“tableObject 中的项目”和“item.details 中的 i”。我做了一个只搜索子应用程序的 plunker:plnkr.co/edit/mO347HdnU7ibHR05rhHx?p=preview 请注意,您需要为每列添加一个过滤器,并且两者都必须更新!
【解决方案2】:

您应该将过滤器应用于与您的 ng-model 关联的正确字段。 所以而不是:

<tr ng-repeat="item in tableObject | filter:search">

例如应该是:

<tr ng-repeat="item in tableObject | filter:search.title">

【讨论】:

  • 感谢您的宝贵时间,即使我提到标题也可以正常工作,但问题是当我在其他第二个输入中键入字母 N 时,表格列出了那些有字母 N 和第一个字段中带有 Y 的记录。请看上面有问题的图片,我希望删除带有字母 Y 的记录。
  • 而您只想要完全匹配?
  • 是的,表格应该只显示那些基于用户输入的记录(可能是 Y 或 N 之类的)
  • 是的,但第二个过滤器在这里产生了问题。你想达到什么样的行为?如果您删除内部过滤器,您将看到我在上面发布的代码实际上正确过滤了行。
  • 我想要的是在表上应用过滤器应该只显示那些记录,假设你搜索“ProjectD”,只有那些记录会显示在表中,同样对于第二个字段,当你仅搜索 Y 代码为 Y 的记录。在上面的图片中,我搜索了字母 N,并且应该只搜索带有 N 子应用代码的记录,在这种情况下,ProjectA 和 Project B 不应出现在表中。希望你现在得到它
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2021-04-01
  • 2018-01-01
  • 2017-03-21
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多