如何根据 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 中的过滤结果更改类? 的相关文章

  • 如何使用 JavaScript 创建链接?

    我有一个标题字符串和一个链接字符串 我不知道如何将两者放在一起以使用 JavaScript 在页面上创建链接 任何帮助表示赞赏 我试图解决这个问题的原因是因为我有一个 RSS 源并且有一个标题和 URL 列表 我想将标题链接到 URL 以使
  • 在 contenteditable div 中选择范围

    我有一个contenteditablediv 和其中的一些段落 这是我的代码 div style border solid 1px black width 300px height 300px div Hello world div div
  • 为什么我的淘汰单选按钮在另一个具有点击绑定的元素内时会失败?

    我有一个单选按钮列表 我想要点击 li 他们还检查单选按钮 这一切都有效 直到我放了一个name单选元素上的属性 然后我的代码停止工作 我的代码如下所示 ul li li ul li
  • AngularJS:Array.prototype.find() 在 Chrome 中不起作用

    我遇到一个问题 我的角度代码可以在 Firefox 中工作 但不能在 Chrome 中工作 浏览器控制台打印如下 TypeError undefined is not a function at setSelectedColor http
  • IE从哪个版本开始支持Object.create(null)?

    您可以通过多种方式在 JavaScript 中创建对象 creates an object which makes the Object prototype of data var data1 new Object Object liter
  • 如何将内联 JavaScript 与 Express/Node.js 中动态生成的内容分开?

    对于具有几年 Web 开发经验但没有找到答案的人来说 这是一个有点菜鸟的问题程序员堆栈交换 or Google 我决定在这里问一下 我在用Express网络框架Node js 但这个问题并不特定于任何 Web 框架或编程语言 以下是从数据库
  • Bootstrap按钮加载+Ajax

    我正在使用 Twitter Bootstrap 的按钮加载状态 http twitter github com bootstrap javascript html buttons http twitter github com bootst
  • 如何将函数附加到弹出窗口关闭事件(Twitter Bootstrap)

    我做了一些搜索 但我只能认为我可以将事件附加到导致其关闭的按钮 https stackoverflow com questions 13205103 attach event handler to button in twitter boo
  • 如何纠正流警告:解构(缺少注释)

    我正在编写一个小型 React Native 应用程序 并且正在尝试使用 Flow 但我无法在任何地方真正获得有关它的正确教程 我不断收到错误 destructuring Missing annotation 有关 station 这段代码
  • 将 GMT 时间转换为当地时间

    我以这种格式从我的服务器获取 GMT 时间 Fri 18 Oct 2013 11 38 23 GMT 我的要求是使用Javascript将此时间转换为本地时间 例如 如果用户来自印度 首先我需要采用时区 5 30并将其添加到我的服务器时间并
  • 设置 cookie 时中断 JavaScript 执行

    当设置 cookie 时 是否可以始终中断浏览器开发人员工具中的 javascript 执行 无需显式设置 JS 断点 document cookie 在 html head 块的开头添加此代码片段效果很好
  • 调整图像大小并将画布旋转 90 度

    这里有很多关于在 js 上使用画布旋转图像的主题 我阅读了其中的大部分内容 但无法找到解决我的问题的方法 我正在接收任何分辨率的图像 来自上传组件 我将其大小调整为 1024x768 如下所示 var canvas document cre
  • Javascript split 不是一个函数

    嘿朋友们 我正在使用 javascript sdk 通过 jQuery facebook 多朋友选择器在用户朋友墙上发布信息 但是我收到此错误friendId split 不是函数 这是我的代码 function recommendToFr
  • 为什么我们在打字稿中使用 HTMLInputElement ?

    我们为什么使用 document getElementById ipv as HTMLInputElement value 代替 document getElementById ipv value 功能getElementById返回具有类
  • DataTables row.add 到特定索引

    我正在替换这样的行项目 var targetRow entity row dataTable targetRow closest table dataTable DataTable dataTable row targetRow remov
  • 将 UMD Javascript 模块导入浏览器

    你好 我正在对 RxJS 进行一些研究 我可以通过在浏览器中引用它来使用该库 如下所示 它使用全局对象命名空间变量 Rx 导入 我可以制作可观察的东西并做所有有趣的事情 当我将 src 更改为指向最新的 UMD 文件时 一切都会崩溃 如下所
  • 在移动设备上滚动

    这个问题更多的是一个建议研究 我确实希望它对其他人有帮助 并且它不会关闭 因为我不太确定在哪里寻求有关此事的建议 在过去的 6 个月里 我一直在进行移动开发 我有机会处理各种设备上的各种情况和错误 最麻烦的是滚动问题 当涉及到在网站的多个区
  • 代码镜像错误:未捕获错误:扩展集中无法识别扩展值([对象对象])

    全部 我目前正在从事一个React Electron项目 该项目的目标是完成一个Markdown编辑器 当我配置codemirror 该程序报告错误说 Uncaught Error Unrecognized extension value
  • 在 Shopify 商店中嵌入 Vue 组件

    在产品页面中 我尝试显示自定义 Vue 组件 为简洁起见 该组件根据给定的产品 ID 显示 Firebase 数据库中的一些信息 我最初尝试将其制作为 Shopify 应用程序 以便我可以访问他们的 API 我实现了 OAuth 并且可以检
  • 如何用另一个响应替换窗口的 URL 哈希?

    我正在尝试使用替换方法更改哈希 URL document location hash 但它不起作用 function var anchor document location hash this returns me a string va

随机推荐

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

    假设我有一个类似的列表 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