如何使用复选框在 angularJS 中过滤多个值(或运算)

2024-06-04

如何使用Checkbox在angularJS中过滤多个值(OR运算)

<ul ng-repeat="movie in movies |filter:Filter.Comedy | filter:Filter.Action  | filter:Filter.Drama">
    <li>{{movie.name}}</li>
</ul>
<label>Comedy</label><input  type="checkbox" ng-model="Filter.Comedy" ng-true-value="Comedy"  data-ng-false-value=''/><br/>
<label>Action</label><input  type="checkbox" ng-model="Filter.Action" ng-true-value="Action"  data-ng-false-value=''/><br/>
<label>Drama</label><input  type="checkbox" ng-model="Filter.Drama" ng-true-value="Drama"  data-ng-false-value=''/>

http://jsfiddle.net/samibel/va2bE/1/ http://jsfiddle.net/samibel/va2bE/1/


使用过滤函数:

View:

<ul ng-repeat="movie in movies | filter: showMovie">
    <li>{{movie.name}}</li>
</ul>

控制器:

$scope.showMovie = function(movie){
    return movie.genre === $scope.Filter.Comedy || 
        movie.genre === $scope.Filter.Drama ||
        movie.genre === $scope.Filter.Action;
};

Fiddle http://jsfiddle.net/GruffBunny/utKug/

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

如何使用复选框在 angularJS 中过滤多个值(或运算) 的相关文章

随机推荐

  • keycloak - 基于用户名(电子邮件地址)的领域解析

    我正在开发一个多租户项目 其中用户名实际上是他们的电子邮件地址 而电子邮件的域用作租户标识符 现在在 keycloak 中 每个租户都有不同的领域 但我希望为所有租户提供一个登录页面 并且实际领域将通过用户名 电子邮件地址 以某种方式解析身
  • Hibernate 中的 UserType 加入

    在这种情况下 是否有可能让 hibernate 为某些 正确 值做 正确的事情 from ClassA a ClassB b where a prop b prop 问题是 prop 是一个 UserType 在连接表中具有不同的表示形式
  • 但为什么浏览器 DOM 经过 10 年的努力仍然这么慢?

    Web 浏览器 DOM 自 90 年代末以来就已存在 但它仍然是性能 速度方面最大的限制之一 我们拥有来自 Google Mozilla Microsoft Opera W3C 和其他各种组织的一些世界上最聪明的人才 为我们所有人致力于 W
  • 有什么办法可以将2个数组添加到一个数组中吗?

    有没有一种简单通用的方法可以将两个数组添加到一个数组中 在下面的情况下 不可能简单地使用C A B陈述 我想避免每次都为它制定算法 TPerson record Birthday Tdate Name Surname string end
  • 在高负载站点中使用 PHP 的策略

    在你回答这个问题之前 我从未开发过任何足够流行的东西来达到高服务器负载 把我当作 叹气 一个刚刚登陆地球的外星人 尽管我了解 PHP 和一些优化技术 我正在开发一个工具PHP如果效果好的话 可以吸引相当多的用户 然而 虽然我完全有能力开发该
  • 用于选择项目/属性列表中具有多个属性的项目的 SQL 语句是什么?

    假设我有一个表 其中列出的项目和属性如下 frog green cat furry frog nice cat 4 legs frog 4 legs 我想从项目列中选择同时具有绿色和 4 条腿属性的唯一对象 在这种情况下 我希望只返回青蛙对
  • 使用 Javascript 编辑和保存用户 HTML - 安全性如何?

    例如我有一个Javascript 支持的表单创建工具 您可以使用链接添加元素的 html 块 如输入字段 并使用 TinyMCE 来编辑文本 这些是通过自动保存功能保存的 该功能在特定事件的后台执行 AJAX 调用 被调用的保存函数负责数据
  • 在 WiX 中轻量运行时,DefaultDir 无效

    我只是想做一个安装程序 将一些文件移动到程序文件中 设置开始菜单链接 并出现在要卸载的添加 删除程序中 目前我很乐意点击开始菜单链接 因为这看起来相对简单 需要注意的是 我特别希望可以通过脚本构建它without任何类型的全局安装 这意味着
  • 您能否从函数、args 和 kwargs 确定变量将如何分配?

    我有一些样板逻辑 我想包装几个具有相同可选关键字的函数 现在看起来像下面的代码 但是 这仅处理 opt key 作为关键字传递的情况 而不是按位置传递 解决这个问题的一种方法是了解如何解决参数分配 是否有一些元函数接受函数 args 和 k
  • VBA 从文本文件的属性获取日期

    我正在尝试获取特定文本文件上传到计算机的日期 该日期不在实际的文本文件中 您必须右键单击然后转到属性才能查看日期 我需要将日期读入变量 我不知道从哪里开始尝试完成这件事 谢谢你 杰西 斯莫瑟蒙 如果内置FileDateTime 不是你可以使
  • 如何在watir中找到data-id?

    我是 watir 测试的新手 有人能帮我找到以下元素吗 div class location picker type level table table div 我喜欢找到这个div data loc type with table存在 e
  • Fortran90 中 BLAS 函数返回零

    我正在学习在Fortran90中使用BLAS 并使用子例程编写了一个简单的程序SAXPY https software intel com en us mkl developer reference fortran axpy和函数SNRM2
  • 从 git repo 拉取后出现白屏死机(React JS、Nginx)

    每当我从 master 分支执行 git pull 到服务器上时 我所有的 React 文件似乎都消失了 屏幕变成白色 我发现的临时解决方法是 删除浏览器 cookie 缓存和站点历史记录 然后关闭浏览器并重试 删除node modules
  • 在 MFC 中获取现有但非活动视图

    假设我想访问 MFC MDI 应用程序中文档类中的特定视图 如果它已打开 该视图当前可以是活动的 也可以是非活动的 如果我可以假设视图始终处于活动状态 我可以按照此说明进行操作 http support microsoft com kb 1
  • 尝试加载自定义配置时,Visual Studio 安装和部署项目中出现 FileNotFoundException

    我试图在我的设置和部署项目中调用自定义操作来更新我的应用程序上的 app config 中的某些项目 我已经以通常的方式完成了自定义配置部分 例如 ConfigurationProperty serviceProvider IsRequir
  • 在 docker run 中发布 8080:80 和 8080:8080 有什么区别?

    我正在尝试运行詹金斯容器 我使用 docker run restart always name myjenkins p 8080 80 jenkins 但无法访问 jenkinshttp 本地主机 8080 http localhost 8
  • 在CSS中重置Margins/Padding时使用*是错误的吗?

    应该避免以下内容 还是应该因其简单性而受到赞扬 作为记录 我在我构建的每个站点中都使用它 但我注意到它并不存在于许多主流 CSS 重置框架中 他们是否也不使用它 margin 0 padding 0 最好不要使用它 因为它会导致表单元素出现
  • 批量修改XML文件

    好的 所以我不太熟悉使用 For F 如果文件是静态的并且有一组可以跳过然后从中提取数据的行 我可以修改它 我目前正在尝试修改 XML 文件 该文件将具有不同数量的行 但始终具有以下内容
  • 在 C# 中给定周数和年份,计算一周的开始和结束日期(基于 ISO 规范)

    我需要生成一份报告 显示一年中的 52 周 或某些年份的 53 周 及其开始日期和结束日期 有一个 ISO 规范可以做到这一点 但看起来非常复杂 我希望有人知道在 C 或 Visual Basic 中执行此操作的方法 实际上适用于 Visu
  • 如何使用复选框在 angularJS 中过滤多个值(或运算)

    如何使用Checkbox在angularJS中过滤多个值 OR运算 ul li movie name li ul