当输入字段为空时显示 ng-repeat 列表时,AngularJS 过滤器比较器为 true

2023-11-21

我将通过这个示例小提琴来演示如何使用比较器参数来过滤精确匹配......:

http://jsfiddle.net/api/post/library/pure/

优先级是 1-100 之间的数字,但我将其作为文本输入并作为字符串过滤 因此,任何包含子字符串的数据也会通过 ng-repeat...就像当我输入 1 时,它也会显示 11、111、132 等...这就是我遇到 :true 比较器的方式。

我读过其他 stackflow 答案,建议编写自定义过滤器函数,但使用真正的比较器,看起来我可以通过以下方式实现我想要的:

<input type="text" class="form-control" id="search.priority"
  title='Priority number to filter by'
  ng-model="search.priority" >

<tr ng-repeat="workflowItem in workflows | filter:search:true">
  <td>{{workflowItem.priority}}</td>

它只过滤完全匹配的内容。但是,显然当输入字段为空时它不会传递任何内容,因为没有任何内容与空字符串匹配。

我的问题是:有没有办法让 ng-repeat 在字段为空时仍然显示所有内容,同时保持精确匹配过滤器?珍惜大家的时间!


您将需要使用自定义比较器函数。它将允许您执行严格的比较,除非谓词为假。

那么您的标记将是:

 <input type="text" class="form-control" id="search.priority"
  title='Priority number to filter by'
  ng-model="search.priority" >

<tr ng-repeat="workflowItem in workflows | filter:search:exceptEmptyComparator">
 <td>{{workflowItem.priority}}</td>

并在控制器上定义比较器函数:

$scope.exceptEmptyComparator = function (actual, expected) {
    if (!expected) {
       return true;
    }
    return angular.equals(expected, actual);
}

这应该够了吧。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

当输入字段为空时显示 ng-repeat 列表时,AngularJS 过滤器比较器为 true 的相关文章

  • 使用智能菜单jquery打印json

    menu name Computers children name Notebook children name Apple name Windows name Tablets children name Apple name Androi
  • 整个页面都是玻璃板

    有没有一种简单的方法可以在整个 HTML 页面上拥有一个 玻璃窗格 而不管缩放 幻灯片事件 平台 浏览器 移动 桌面 我所说的 简单 是指纯 CSS 支持 而不是插件 后备 插件建议也可能有用 Thanks 如果您只是指所有内容之上的一层
  • Javascript 自时间戳以来经过的时间

    我试图通过将其存储在变量中来 缓存 一些信息 如果 2 分钟过去了 我想获取 实时 值 调用 url 如果 2 分钟还没有过去 我想从变量中获取数据 我基本上想要的是 if time passed is less than 2 minute
  • 为什么我的箭头函数有原型属性?

    正如文档中提到的https developer mozilla org en docs Web JavaScript Reference Functions Arrow functions https developer mozilla o
  • 如何更改点击事件上的引导插入符指向方向

    我正在使用 2 3 2 引导程序 因为当我单击菜单按钮时 我可以更改插入符号图标的位置 我需要当我单击图标插入符号向上时 当您单击另一个项目时 插入符号返回到初始状态 这怎么可能 导航代码 div div class container d
  • 如何获得相对于特定父级的偏移量?

    我想获取元素相对于的偏移量特定的父母不是直接的 也不是文档 我在互联网上查找并找到了offset http api jquery com offset and position http api jquery com position jQ
  • 强制执行 show.bind

    我有一个包含数据的表 当从另一个视图触发事件时 我希望视图检查 show bind 语句 问题是该事件没有更改当前视图中的任何数据 foo html tr p canBeRemoved p tr 我正在使用 EventAggregator
  • 从对象获取数据 - 我看到数据但无法保存它们

    正如你所看到的 我是新来的 我确实尝试过搜索 但没有找到解决我问题的方法 所以这是我的问题 如果我这样做 console log grid data kendoGrid data 这在控制台中显示如下 所以我明白这一点 有一个数组和一个带有
  • 如何垂直打印数组中的字符串元素? [关闭]

    Closed 这个问题需要调试细节 help minimal reproducible example 目前不接受答案 我有一个数组 我想垂直打印每个元素 例如 myArr abc def ghi 输出应该是 a d g b e h c f
  • 使用 jQuery 更改 SVG 元素的“xlink:href”属性

    我正在尝试使用单击事件更改 xlink href 属性 到目前为止它部分有效 这就是我正在做的 HTML a href class ui btn ui corner all ui shadow editIcon style text ali
  • 如何使用 JavaScript 播放任意 MIDI 音符?

    澄清一下 我不想生成 MIDI 文件 也不想播放 MIDI 文件 我希望即时播放 MIDI 音符 我尝试使用https github com mudcube MIDI js https github com mudcube MIDI js作
  • Webpack:如何将 javascript 注入 HTML 而不是单独的 JS 文件

    有没有办法让 webpack 将输出注入 HTML 而不是单独的文件 我不得不使用html webpack inline source plugin https github com DustinJackson html webpack i
  • 如何在 Next.js 中正确使用 Mongoose 模型?

    我正在使用 TypeScript 和 MongoDB Mongoose 构建 Next js 应用程序 我在使用 Mongoose 模型时开始遇到错误 这导致它们在每次使用模型时都尝试覆盖模型 导致模型覆盖错误的代码 import mong
  • 单击时突出显示文本(javascript jquery html)

    当您在所有浏览器中双击某个单词时 它们会自动突出显示单击下的单词 但是否有可能找到一种方法exact单击一下就会发生同样的事情吗 我想这涉及到的事情可能是 TextRange 的东西 对所有段落 或整个正文或 div 的 onclick 做
  • JavaScript 按名称获取当前作用域中的变量

    所以我有一个变量和该变量名称的字符串 function Factory string var foo bar console log foo is equal to this string 如果变量所在的对象是当前对象 如何从字符串文字中获
  • 加载 angularjs 路由后运行 javascript 代码

    我需要在 angularjs 加载路线后显示警报 显示警报的代码位于 angularjs 异步加载的视图中 视图加载后 我希望它能够运行 但它没有 我知道我可以广播并告诉它稍后运行等 但我需要一个更通用的解决方案 假设您正在谈论基于以下内容
  • jQuery 单击附加元素不起作用

    我有一个数组 我正在从 Array 获取数据并在 jQuery Append to list 中使用它 但是当我单击列表项时 它只显示最后一个元素 var array 1 2 7 3 4 8 5 6 9 for var i 0 i lt a
  • onClick 事件适用于触摸屏设备上的触摸吗?

    我用过onclick我的网站上的活动 但是 当我在谷歌浏览器的开发人员模式移动视图中打开它时 触摸使用鼠标单击的元素没有任何反应 所以我的问题是 我还必须添加吗ontouch事件连同onclick事件或 onClick 事件适用于所有触摸屏
  • 在 Sublime Text 下获取完整的 JS 自动补全

    我刚刚在 Windows Vista 下安装了 Sublime Text 甚至遵循了中给出的建议这个帖子 https stackoverflow com questions 10636410 modifying sublime text 2
  • Chrome 中的 addEventListener

    我正在关注 Lynda com 上有关新 DOM 事件模型的教程 这是我正在使用的代码 function addEventHandler oNode sEvt fFunc bCapture if typeof window event un

随机推荐

  • Apache Flink - 如果 x 分钟内没有收到数据,则发送事件

    如何使用 Flink 的 DataStream API 实现一个运算符 以便在一段时间内没有从流中接收到数据时发送事件 这样的运算符可以使用ProcessFunction DataStream
  • 第一个实体框架 6 nonquery 的六秒预热时间

    从我的集成测试来看 Act Stopwatch w new Stopwatch w Start userService Create userDTO w Stop public void Create UserDTO userDTO var
  • 如何让我的 Chrome 扩展程序只注入一次脚本?

    我在用着程序化注入仅在单击浏览器操作时将我的扩展程序的代码注入页面 这就是我的扩展中的内容活动页面 根据中的示例文档 chrome browserAction onClicked addListener function callback
  • JQuery ajax 调用 httpget webmethod (c#) 不起作用

    我试图让 ajax 访问后面代码中的 webmethod 问题是我不断从 jQuery 收到错误 parserror onfail method 如果我将 GET 更改为 POST 一切正常 请参阅下面我的代码 阿贾克斯调用
  • 有reactive-banana-gtk吗?

    我找到了reactive banana wax 想知道是否还有一个类似的gtk包 因为reactive香蕉应该支持gtk 根据http www haskell org haskellwiki Reactive banana The reac
  • 用于诊断 .NET 中内存泄漏的工具(ASP.NET 应用程序)[关闭]

    Closed 此问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 目前不接受答案 我们需要一个工具来轻松检测 ASP NET 应用程序中的内存泄漏 我们有一个应用程序 它消耗大量内存 Thanks Using WinDbg不像使用
  • Thread.CurrentPrincipal.Identity vs HttpContext.User.Identity [重复]

    这个问题在这里已经有答案了 可能的重复 http context user 和 thread currentprincipal 之间的区别以及何时使用它们 这两者在 ASP NET 应用程序中有何区别 我知道HttpContext User
  • 如何将 CSS 用于 Vaadin 组件?

    我似乎看到了一些例子 人们回答了如何通过添加 CSS 代码从组件中获取某些特定行为的问题 但是似乎没有人解释如何使用该 CSS 代码将其连接到 Java 组件 v table body overflow hidden important 例
  • 一个目录中的多个 Git 存储库

    我想将一个目录部署给具有不同权限的多个开发人员 所以这是 Git 无法做到的一件事 如何在一个目录中创建两个存储库 并通过使用排除由另一个存储库管理的文件来为它们分配不同的文件列表 gitignore file 例子 www project
  • MySQL“NOT IN”查询3个表

    我有 3 个表格课程 成绩和评估 我想比较两个表的等级和评价 如果表等级中的数据在表评价中不存在 则该数据会出现 输出 select Grade ID Courses Course ID Courses Grade NAME Course
  • 如何使用 6 个按钮(如 Windows 磁贴)创建布局

    我正在尝试创建一个包含 6 个按钮的布局 可以像 Windows Phone 的平铺一样自动适应屏幕尺寸 在代码中 我动态创建了 6 个按钮 2 个用于行 但按钮应该适合填充后者的屏幕大小 我该如何继续
  • 在动态分配的二维数组上使用 realloc() 是个好主意吗?

    我主要对它的可行性感兴趣缩小这样的数组 我正在开发一个项目 其中我使用单个 malloc 调用来每个创建单独的中等大小的二维数组 每个阵列最多只有几十 MiB 问题是 在其中一个阵列的生命周期内 其内容的大小会急剧缩小 减少一半以上 显然
  • 了解合并排序优化:避免复制

    我在算法书中有下面的合并排序程序 其中提到主要问题是合并两个排序列表需要线性额外内存 并且在整个算法中复制到临时数组并返回所花费的额外工作会减慢速度大幅下降 通过在递归的交替级别明智地切换 a 和 tmp array 的角色可以避免这种复制
  • NVD3.js:ReferenceError:nv 未定义

    我正在使用 NVD3 js 库来生成图形 我尝试向其中添加折线图并收到上述错误 如何解决呢 我正在尝试这个here 实际上我发现问题出在文件夹结构上 Angular nvd3 网站附带的示例给出了路径 Bower components nv
  • Bootstrap 3 - 连续使用超过 12 列

    我遇到了一种情况 要求我不要限制一行中的列数 因为可能会将多个内容块从管理中的位置添加到该区域 默认情况下 BS3 的行为告诉 12 列 div 不要浮动 这会导致它们越过较小的浮动 div 的顶部 因此 我为我的系统编写了一个覆盖作为一个
  • 为什么我不能覆盖 `Array` 的原型 (`Array.prototype`)?

    我设定的原型是Array作为一个例子my 我认为book aa将显示 aa 但它显示 undefined 为什么 谢谢 h2 Array Properties h2
  • Keycloak:无法在 Spring Boot 应用程序中加载 URL

    我目前正在尝试开发一个使用 keycloak 保护的 Spring Boot Rest Api 当我尝试调用必须识别用户的 api 时 出现错误 错误信息如下 2020 04 10 16 09 00 324 WARN 44525 nio 8
  • XmlSerializer 可以反序列化为 Nullable 吗?

    这是重复的XmlSerializer 可以反序列化为 Nullable 吗 但我需要一个既不更改 xml 文档也不强迫我实现 IXmlSerialized 接口的解决方案 我不想实现 IXmlSerialized 因为旁边还有许多其他元素
  • jquery insertafter和insertbefore添加滑动动画

    如何为上下排序运动添加动画移动效果 您可以通过单击 向上 和 向下 文本链接来检查运动情况 这是我的代码 document ready function move up click function if this prev this pa
  • 当输入字段为空时显示 ng-repeat 列表时,AngularJS 过滤器比较器为 true

    我将通过这个示例小提琴来演示如何使用比较器参数来过滤精确匹配 http jsfiddle net api post library pure 优先级是 1 100 之间的数字 但我将其作为文本输入并作为字符串过滤 因此 任何包含子字符串的数