如何根据 AngularJS 中的过滤结果更改类?

2023-12-20

我无法弄清楚如何根据过滤器的状态/结果更改类的样式。我的代码:

    <div data-ng-if="search.length >= 3" >
      <div data-ng-class="{list:true}" style="margin-top: 30px;">
       <a class="item item_recipe" data-ng-repeat="item in items | nonBlankFilter:search | filter:search" data-ng-click="$emit('search.click',item.PK);">
        <img class="thumbnail" src="images/thumbnails/{{item.THUMB}}">
        <div class="title">{{item.TITLE}}</div>
    </a>
</div>

现在发生的情况是,样式“列表”仍然存在,它具有背景,因此即使过滤器中没有结果,背景仍然可见。

我希望我已经很好地解释了自己。


您可以将过滤结果分配给中间变量,然后使用该变量有条件地应用您的类:

<div ng-if="search.length >= 3">
  <div ng-class="{list: filteredItems.length}" style="margin-top: 30px;">
    <a 
      class="item item_recipe" 
      ng-repeat="item in filteredItems = (items | nonBlankFilter:search | filter:search)" 
      ng-click="$emit('search.click',item.PK);"
    >
      <img class="thumbnail" src="images/thumbnails/{{item.THUMB}}">
      <div class="title">{{item.TITLE}}</div>
    </a>
  </div>
</div>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何根据 AngularJS 中的过滤结果更改类? 的相关文章

  • Haxe for javascript 没有全局命名空间污染?

    此问题仅适用于 Haxe 版本 我知道 haxe 一段时间了 但直到昨天才真正使用过它 出于好奇 我决定移植对决 js http wmd editor com examples splitscreen 一个 javascript 端口降价
  • 通过单击堆叠条形图打开选项卡

    我正在使用 R 构建一个包含转发的堆积条形图 ggplot and plotly 如果单击条形图的一部分 我希望打开一个新的浏览器选项卡并显示该特定日期的推文以及指定的转发量 但是 当我单击下面示例中的其中一个栏时 会打开一个不同的链接 表
  • 如何使用 Javascript 将 HTML 表单数据输出到 XML 文件?

    我目前正在尝试弄清楚如何将 HTML 表单数据输出到 XML 文件 这是我过去几天一直在研究的一个想法 目的是创建一个用于 Windows 7 安装的 autounattended xml 文件 目前我的 HTML 如下
  • LeafletJs只显示一个国家

    我使用 Leafletjs 和 D3 来显示地图 我只想在地图上显示英国 Leaflet和D3是否可以只显示英国 这当然是可能的 现在的解决方案取决于您是想使用 D3 绘制英国 还是想从 Tile Server 获取它 在后一种情况下 有一
  • d3 树 - 有相同孩子的父母

    我一直在将代码从 JIT 转换为 D3 并使用树布局 我已经复制了代码http mbostock github com d3 talk 20111018 tree html http mbostock github com d3 talk
  • 按住鼠标时 JavaScript 重复动作

    是否有一个 JavaScript 函数每隔如此多的毫秒重复一次 以至于按住 html 按钮 如果这可以使用标准 JavaScript 来完成 那就太好了 但使用 jQuery 或 jQuery 插件也很棒 On the mousedown
  • 添加数组的总和。显示1个输出

    更新 这个问题的答案如下 感谢在不同线程上进行的 dougtesting 将数组相加 显示总和 https stackoverflow com questions 45724641 add array together display su
  • HTML5 Audio Element 无法在 IOS 11 设备上的 safari 中播放 mp3 直播

    我是一家广播公司的网络开发人员 自 iOS 11 发布以来 我们收到了一些用户投诉 称我们的音频直播流无法再在 IOS 11 设备上播放 为了将流嵌入我们的网站 我们使用 HTML5 AudioElement 在 iOS 11 的 iPho
  • 如何在 d3.js 中填充 svg 圆圈内的图像

    这是我在 svg 中填充圆圈的代码 var svgContainer d3 select body append svg attr width 1000 attr height 1000 var circles svgContainer s
  • d3 序数尺度的映射

    我正在使用 D3 的序数比例将数字映射到颜色 我用过这个 color d3 scale ordinal range 1f77b4 ff7f0e 2ca02c d62728 9467bd 8c564b e377c2 domain 0 6 co
  • 将表类型添加到 JSON 编辑器

    我想了解的代码这个 JSON 编辑器 http mb21 github io JSONedit 并修改它 In 指令 js https github com mb21 JSONedit blob gh pages js directives
  • 在 Jscript 中实例化 System.Threading.Thread 对象

    我正在尝试使用 Jscript 创建一个新的 System Threading Thread 对象 但我无法让构造函数工作 如果我只是执行以下操作 var thread new Thread threadFunc function thre
  • AngularJS 与(Angular JS + jQuery)

    我有一个关于仅使用 AngularJS 和纯 JavaScript 以及使用 AngularJS 和 jQuery 时的性能问题 ex app directive fitHeight function window return restr
  • 使用 System.js 导入 Typescript 编译的模块时出错

    我最近正在学习使用 system js 导入由 Typescript 编译的模块 这些模块之前是为 require js 编译的 并且工作正常 但是合并到system js时 应用时无法导入模块系统生产 js 控制台说 Uncaught i
  • Cordova 文件传输到节点服务器

    我正在使用 ng Cordova fileTransfer 插件尝试将用户相机胶卷中的照片上传到 Node Express 服务器 我正在获取照片的本地 URI 并尝试将其传递给插件 如下所示 cordovaFileTransfer upl
  • queue.js 是如何工作的?

    我一直试图理解如何Mike Bostock 的queue js https github com mbostock queue blob master queue js有效 但我看不出它是如何工作的 我不明白的部分是代码如何设法继续执行回调
  • EaselJS Alpha 遮罩滤镜

    我对 Canvas 还很陌生 我一直在尝试将图像颠倒过来EaselJS Alpha 蒙版 http www createjs com demos easeljs alphamaskreveal示例 以便初始图像清晰 并且您可以paint是模
  • 在 Nest.js 中发送之前如何格式化响应?

    我按照文档进行操作 并能够添加用于响应映射的拦截器 我想要一致的 json 格式输出作为响应 我怎样才能用拦截器或其他比这种方法更好的方法来实现这一点 statusCode 201 message Custom Dynamic Messag
  • 如何使 CSS 动画/过渡以固定速度而不是固定持续时间播放? [复制]

    这个问题在这里已经有答案了 我有一个 CSS 动画 可以使元素沿直线移动未定义的距离 据我所知 动画具有固定的持续时间 因此无论元素必须移动多远 动画始终需要相同的时间来运行 我该如何制作才能使动画没有固定的duration 但有固定的运动
  • 获取css规则、chrome扩展

    我正在开发 Chrome 扩展程序 它需要访问document styleSheets cssRules 它在某些网站上运行良好 例如w3school 但其他人则不然 比如堆栈溢出 我收到错误 Failed to read the cssR

随机推荐

  • 如何使用开始/停止谓词对列表的连续元素进行分组?

    假设我有一个类似的列表 def data a b c d e f g h b d x 和谓词如 defn start x x b defn stop x x d 标记子序列的第一个和最后一个元素 我想返回一个包含子组的列表 如下所示 par
  • 有什么方法可以控制 SqlEntityConnection 上的 AutoDetectChanges 吗?

    本文 http ilmatte wordpress com 2013 01 01 entity framework code first always disable autodetectchanges when importing dat
  • C# EF Linq 按位问题

    好的 例如 我按位使用如下 星期一 1 星期二 2 星期三 4 星期四 8 等 我正在使用业务实体框架类 我正在使用一个类并传递一个像 7 这样的值 星期一 星期二 星期三 我想返回与这些日子匹配的记录 public List
  • C# 回调接收UTF8字符串

    我有一个 C 函数 一个回调 从用 C 编写的 Win32 DLL 调用 调用者给了我一个UTF8字符串 但我无法正确接收它 所有匈牙利特殊字符都出错了 UnmanagedFunctionPointer CallingConvention
  • 如何在ionic 2/3中处理数据库异步操作

    我正在 ionic 中使用数据库 我调用一个 API 该 API 返回一些记录 我必须将这些记录插入数据库以及插入操作何时完成then我想从数据库中调用选择记录 问题是异步行为 在插入操作完成之前调用从数据库中选择记录 谁能帮我解决这个问题
  • 在 PHP 中验证电子邮件地址[重复]

    这个问题在这里已经有答案了 可能的重复 如何在 PHP 中验证电子邮件地址 https stackoverflow com questions 12026842 how to validate an emailaddress in php
  • 如何按工作日顺序(如日历周)而不是按字母顺序(在 C# 中)排序?

    我无法弄清楚如何按日期对独立存储中的 XML 文件中的查询输出进行排序 该日期是 xml 文件中的值 我的意思是它将按当天的第一个字母排序 因此它将返回星期五作为第一个字母 因为其中有 F 但这不是我想要的 相反 它们应该按工作日的顺序排序
  • 从 File.OpenRead() 返回流

    我正在编写一个 WCF 服务 该服务将允许 ASP Net 网站检索文件 基于本文 http msdn microsoft com en us library ms789010 aspx Y912 我的问题是 当我返回流时 它是空白的 为简
  • WordPress wp_localize_script 是做什么的? [关闭]

    Closed 这个问题不符合堆栈溢出指南 help closed questions 目前不接受答案 有人可以解释一下吗wp localize script 做 即使我在 WP Codex 中读过它 我一开始也不明白它的作用 它允许您通过打
  • 如何在使用插件时将域添加到 next.config.js 的“next/image”

    这是我当前的设置 next config js const withImages require next images module exports withImages webpack config options return con
  • 使用 Promise 在 Node.js + Express 中进行错误处理

    使用 Node js Express 4 Mongoose 使用 Promise 而不是回调 我不知道如何整理我的错误处理 我得到的 相当简化的 是 app get xxx id function request response Xxx
  • 使用reduce在Javascript中构建过滤函数

    在一次采访中 有人向我提出了一个让我摸不着头脑的问题 我不想花周末担心结果 而是想尝试解决问题 但我无法弄清楚 使用下面的reduce函数 构建一个过滤函数 该函数将一个数组和一个测试函数作为参数 并返回一个新数组 该数组已根据测试函数过滤
  • SQL ORDER BY(序列)[重复]

    这个问题在这里已经有答案了 我有一个我想要的sql语句ORDER BY特定的顺序 SELECT FROM UserDB ORDER BY Role 我怎样才能将数据带到我的GridView表从顶部的 管理员 列出 然后是 用户 和 来宾 所
  • 如何在程序中获取 _GLOBAL_OFFSET_TABLE_ 地址?

    我想在我的程序中获取 GLOBAL OFFSET TABLE 的地址 一种方法是使用nm http linux about com library cmd blcmdl1 nm htmLinux 中的命令 可能会将输出重定向到文件并解析该文
  • 传递结构数组时遇到问题

    我一生都无法弄清楚如何在整个程序中传递这个结构数组 有人可以帮忙吗 现在我在 main 中收到一个错误 内容是 标记之前预期的主要表达式 Header ifndef HEADER H INCLUDED define HEADER H INC
  • 处理数据库中的层次结构数据

    我很想知道在数据库设计方面处理层次结构的最佳方法 最佳实践 是什么 这是我通常如何处理它们的一个小例子 节点表 NodeId int PRIMARY KEY NodeParentId int NULL DisplaySeq int NOT
  • 土耳其语字符上的 Postgres upper 函数未返回预期结果

    看起来像 postgresupper lower函数不处理土耳其语字符集中的选择字符 select upper Aa lower Aa from mytable 返回 AA aa 代替 AAI aai 请注意 正常的英语字符可以正确转换 但
  • 如何使用 Canvas Jetpack Compose 绘制曲线图

    有谁知道如何在 Jetpack Compose 中使用画布绘制每个角都弯曲的线条 我已经实现了这个使用Canvas drawPoints 但我想让每个角都弯曲成这样 非常感谢任何帮助 None
  • Flutter 和 Firestore 请求中没有用户信息

    Using flutter http flutter io 我已经安装了firebase 身份验证 https pub dartlang org packages firebase auth and 火库 https pub dartlan
  • 如何根据 AngularJS 中的过滤结果更改类?

    我无法弄清楚如何根据过滤器的状态 结果更改类的样式 我的代码 div div style margin top 30px a class item item recipe img class thumbnail src images thu