当前位置: 首页 > 面试题库 >

使角度过滤器成为条件

阎功
2023-03-14
问题内容

我目前正在使用文本输入来过滤项目列表。我想这样做,以便在设置特定变量时,无论文本输入是什么,列表都不会过滤。关于如何实现此目标的任何建议?

<a ng-repeat="set in data | filter: { value: search }" data-id="{{set.id}}" ng-mousedown="setBox(set)" ng-mouseover="setSelected(set, $event)" ng-bind-html="set.value | trustHTML"></a>

问题答案:

如果将过滤器表达式设置为''(或undefined)(这会导致不应用过滤器)(disableFilter设置您的时间),否则将其设置为实际过滤器表达式,则可以实现此目的。

编辑2
:另一个答案(@Ryan下面)更简单易懂。现在不记得它最初是否对我不起作用,或者我只是没有想到这种简单的方法。

因此,假设此切换变量disableFilter--是布尔值:

<a ng-repeat="set in data | filter: (!disableFilter || '') && filterExpression">

(可以filterExpression是您要过滤的任何表达式)。您的具体情况是:

<a ng-repeat="set in data | filter: (!disableFilter || '') && {value: search}">

编辑:

解释上面的工作原理。

  1. 记住这一点,||&&返回其操作数之一的值。
  2. ||&&使用短路评估- true || (anything)收益truefalse && (anything)返回false-不评估(anything)表达式。
  3. ''是虚假的(或者undefined,如果更清楚,请改用)

所以,

disableFilter === true,时!disableFilter === false,则对第二个操作数||-空html" target="_blank">字符串''-进行求值(是虚假的),并(!disableFilter || '')返回''-虚假的值,该值会使&&操作短路,并且不对的第二个操作数求值&&。因此,表达式的返回值为''

disableFilter === false!disableFilter === true短路||操作时,将&&评估并返回的第二个操作数。因此,表达式的返回值为{value: search}

在此处阅读有关逻辑运算符的更多信息



 类似资料:
  • 问题内容: 我想在 angularjs 1.2中 使用unsafe-html 。没有html的过滤器可以工作,而html则不能。我做的事: 我在我的html头中添加了angular-sanitize: 我的角度模块: 我的HTML: 编辑:更新为 问题答案: 已在Angular 1.2中删除。由于您正确地清理了输入内容,因此应该使用。 示例:http://plnkr.co/edit/0bHeXra

  • 我有完全合法的数据来源: 我将其显示在这样的表中: 现在假设我想过滤我的数组。如果我有固定的行数,我可以在< code>tr元素上使用< code>*ngIf来选择显示/不显示一个项目,但是Angular不允许在一个元素上有两个结构指令。 我知道我可以使用< code>Array.filter简单地过滤源数组,但是这样会产生一个副本,如果我的数组大得多,这可能会成为一个问题。 我想将该行嵌套在某个

  • 本文向大家介绍如何换个角度使用VUE过滤器详解,包括了如何换个角度使用VUE过滤器详解的使用技巧和注意事项,需要的朋友参考一下 前言 过滤器在Vue中的主要用于文本格式化,如小写转大小,日期格式化等操作。官方对这个功能介绍也很简单,不过确实很简单,就一个函数而已。但最近在做两款APP时,遇到一些特殊的需求。然后就对vue中的filter一些用法结合源码好好的梳理了下。下边我们以一个日期格式化展开讨

  • 问题内容: 有没有什么好方法可以使用angular过滤列表而不使用ng- repeat?我不想首先使用javascript绘制列表,但是之后我想使用angular对其进行过滤。 例: 我想使用搜索框来过滤现有的html。 (一般请不要使用ng-repeat或jQuery给出任何示例) 问题答案: 您可以编写一个简单的指令来处理显示/隐藏: 并以这种方式使用它: 使用指令有两个好处: 1)。您不必在

  • 问题内容: 我需要一个过滤器来将所有下划线替换为字符串中的空格 问题答案: 不仅接受字符串作为第一个参数,而且接受正则表达式作为第一个参数。因此,将它放在regex分隔符和aslo add 修饰符中。称为全局修饰符,它将在全局范围内进行替换。

  • 当用户选择一个标记时,我只想显示包含该标记的博客。例如,当一个用户选择了'c''标签时,只会显示带有该标签的帖子。 我的设置如下:我有一组包含post标签的博客,其中包含标签: null 这将显示blog-thumbnail组件 下面的代码部分是我的问题所在。它不起作用: 我在这方面花了大量的时间。有人能解释我做错了什么吗?