如何根据 angular.js 中的子复选框选择父复选框?

2024-04-27

我最近一直在使用 Angular.js,并决定在选中父复选框后检查所有复选框,我已经使用了ng-model and ng-checked指令。

    <div ng-app>
        <div ng-controller="Ctrl">
            <input type="checkbox" ng-model="parent"/> Select All<br/>
            <input type="checkbox" ng-model="child_1" ng-checked="parent" ng-click="getAllSelected()"/> First<br/>
            <input type="checkbox" ng-model="child_2" ng-checked="parent" ng-click="getAllSelected()"/> Second<br/>
            <input type="checkbox" ng-model="child_3" ng-checked="parent" ng-click="getAllSelected()"/> Three<br/>
            <input type="checkbox" ng-model="child_4" ng-checked="parent" ng-click="getAllSelected()"/> Four<br/>
            <input type="checkbox" ng-model="child_5" ng-checked="parent" ng-click="getAllSelected()"/> Five<br/>
        </div>
    </div>

现在,我尝试在选中所有子复选框后选择所有父复选框,但遇到一些问题。

    function Ctrl($scope) {
       $scope.getAllSelected = function () {
          var chkChild = document.querySelectorAll('input[ng-model^="child_"]').length;
          var chkChildChecked = document.querySelectorAll('input[ng-model^="child_"]:checked').length;
          if (chkChild === chkChildChecked) $scope.parent= true;
          else $scope.parent= false;
       }
    }

Demo: http://jsfiddle.net/codef0rmer/QekpX/ http://jsfiddle.net/codef0rmer/QekpX/

我们可以让上面的代码更加健壮吗?


复选框中的 ng-checked 属性接受一个表达式。因此,您可以给出带有和/或条件的表达式,如下所述,以使其根据表达式进行检查。

<input type="checkbox" ng-checked="child_1 && child_2 && child_3 && child_4 && child_5" ng-model="parent"/> Select All<br/>

单击每个子复选框时,您不必编写单独的函数来进行计算。

这是 jsfiddle 中的示例 http://jsfiddle.net/pio123/624y6/1/

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

如何根据 angular.js 中的子复选框选择父复选框? 的相关文章

  • AngularJS 控制器等待响应(或设置回调)

    我有一个带有controllers js 和factories js 的AngularJS 应用程序 我喜欢用控制器中的值 我从工厂获得 做一些事情 我的问题是 当我访问这些值时它们是空的 我怎样才能等待回复 或者在哪里可以添加回调 Fla
  • AngularJS:ng-show 与 display:none

    我有一个用例 我必须使用 CSS 默认隐藏 HTML 元素 如下所示 HTML div class item div CSS item display none 但是 我需要在页面加载后使用 ng show 切换元素的可见性 如下所示 di
  • 路线过渡之间滑动 AngularJS

    我只使用 Angular 大约一周时间 所以如果我的代码很糟糕 我深表歉意 我正在尝试在路线转换之间创建滑动操作 我可以在幻灯片中创建效果 但不能在路线转换之间创建效果 无论如何 代码如下 导航 li a class intro curre
  • 当我在控制器中使用 state.go 时,离子滑动菜单不会出现

    大家好 我正在使用 ionic 来构建我的应用程序 并且我放置了幻灯片菜单 问题是当我使用 stage go 更改视图时 此工作正常 但幻灯片菜单失败 那么我该如何解决这个问题 路由器 use strict var app angular
  • 未定义,当从 Selenium 触发时,Chrome 通知中未定义

    我正在致力于自动化一个用 Python 编写的网站 并使用 Angular 其中有很多确认通知 我遇到的问题是 Behat 似乎无法识别这些通知 更不用说允许我与它们交互了 我附上了通知的屏幕截图 以及 Behat 生成的 未定义 未定义
  • 使用 Ionic/angularjs 打开图片库

    如何使用 Ionic angularjs 访问图片库 我只想在每次单击按钮时打开图片库 这怎么可能 您可以使用cordova相机插件 cordova 插件添加 org apache cordova camera 插件参考 https git
  • 没有导出的成员/节点模块

    我刚刚开始使用 5 分钟快速入门找到的 Angular 2 Typescripthere https angular io docs ts latest quickstart html 我遇到了一个看起来很常见的问题 但可能有点不同 我遇到
  • 如何正确地将代码从angularjs迁移到reactjs

    我正在尝试将代码从 Angular 迁移到 React 不确定这是否正确 只是需要一些帮助 看看我是否朝着正确的方向前进 我不知道角度 所以我很困惑 文本数据 是否类似于反应中的状态 我是否必须在顶部的状态中声明它 角度代码 scope t
  • 使用 Angular ui-router 基于状态参数加载控制器

    我正在尝试加载基于状态参数的控制器以使其可重用 state dashboard item detail url detailId detailId detailName detailName views main templateUrl f
  • AngularJS:在部分视图出现之前触发 $viewContentLoaded

    对于部分视图 我想做一些我通常会做的 JavaScript 事情 document ready function 例如将 venet 侦听器绑定到元素 我知道这对于 AngularJS 和加载到 根 视图中的部分视图不起作用 因此 我向控制
  • AngularJS with Grunt - 连接到另一台服务器

    我使用 grunt bower 和 yeoman 创建了一个 AngularJS 应用程序 我猜想 Gruntfile js 在 2014 年 1 月之后发生了变化 不确定 这是我的gruntfile js Generated on 201
  • 如何在 ng-repeat 中使用 $index 来启用类并显示 DIV?

    我有一套 li 元素 ul li a href href ABC a li li a href href DEF a li li a href href A index a li ul li
  • 将占位符绑定到模型会导致 ng-change 在 IE 中加载时执行

    使用 angularjs 如果我将输入的占位符绑定到其模型 则当文档在 IE 中加载时会触发更改事件 这似乎不正确 我在其他浏览器中没有看到这种行为 JSFiddle http jsfiddle net VxBNW 6 Html div d
  • AngularJS - RouteProvider 解析调用服务方法

    我创建了一项检查用户登录状态的服务 如果令牌存在 则登录用户 否则重定向到登录页面 最初我通过routeProvider解析调用了这个服务 这一次就可以完美工作 但是由于Angularjs服务是单例的 因此测试不会针对连续调用运行 然后 我
  • AngularStrap 工具提示禁用我的自定义指令

    我正在尝试让 bs tooltip AngularStrap 指令与我自己的名为 checkStrength 的自定义指令一起使用 该指令检查密码的强度 单独使用这些指令中的任何一个时 它们都可以正常工作 但不能一起工作 This http
  • 使用 ng-if 改变角度方向

    我想通过单击将方向从 rtl 更改为 ltr and in 设置 html
  • Angular JS - 如何在模型更改时制作动画?

    当 currentVertical 改变时 我试图做一个很好的淡出 淡入过渡 在淘汰赛中 这很简单 但我在这里无法弄清楚 请帮忙 以下代码显示一个 UL 列表 当单击 LI 元素时 该列表 绑定 到 scope currentVertica
  • 带有 ui-router 的 Angular 无限摘要循环

    我最初试图解决的问题是 如果用户未登录 则将用户重定向到登录页面 反之亦然 我用下面的代码做到了这一点 run function rootScope http AppService state rootScope on applicatio
  • 在 angularjs 应用程序中更改页面的位置哈希,无需重新加载页面

    我需要能够更改页面的位置哈希 例如从 到 page1 以便 angularjs 不会重新加载页面 有可能吗 在路由定义中添加此参数reloadOnSearch false 禁止在查询参数更改时重新加载基于 ui router 的视图 htt
  • Angularjs:两种方式的数据绑定和控制器重新加载

    如果使用路由和控制器 则模型不会在控制器重新加载之间保存其状态 Angular 在每个路由负载上创建控制器实例和新范围 例如 我在输入中键入具有 ng model something 的内容 转到另一条路线 然后返回第一条路线 我输入的所有

随机推荐

  • 使用 shell 脚本在 Jenkins 中手动构建失败吗

    我想将 Jenkins 构建标记为在一种情况下失败 例如 if f file then echo file found else echo file not found Do Jenkins Build Fail fi 可以通过Shell脚
  • android可以在本机模式下从sd卡加载dll吗

    我想把我写的程序移植到android上 该程序是在 Windows 和 Linux 上用 C 编写的 该程序使用 dll 作为插件架构 通过下载程序从特定文件夹加载的 dll 可以将新插件添加到程序中 我的问题是 是否可以将为 androi
  • VS Code:ModuleNotFoundError:没有名为“pandas”的模块

    尝试导入pandas在 VS 代码中 import pandas and got Traceback most recent call last File c Users xxxx hello sqltest py line 2 in
  • jQuery text() 的替代方案包括元素之间的空格?

    我在容器中有一些任意的正文文本 我不控制它 所以我不知道它的结构 但像这样的事情 div h1 Heading h1 p A paragraph or two p ul li item 1 li li item 2 li ul div 这只
  • 如何在 JavaScript 中访问自定义 html 属性?

    您好 我在这个 html 文档中遇到问题 请帮助我 我对此很陌生 也许我很愚蠢 错过了一些东西 我在这里只放了有用的来源来解决请 a Hurray a br 我希望它显示
  • 访谈:函数指针与 switch case

    在面试期间 我被要求为具有 100 个状态的系统实现一个状态机 其中每个状态又具有 100 个事件 我回答了以下 3 种方法 if else 开关盒 函数指针 if else 显然不适合这样的状态机 因此主要比较是 switch case
  • Visual Studio 2017命令行提示符

    我无法从 Windows 10 中的命令行提示符运行 cl Microsoft Visual Studio C 编译器 我使用的是新的 Windows 10 安装和新的 Microsoft Visual Studio 2017 社区版 我收
  • Python 的类表示魔法方法?

    我有一个自定义类 例如 class foo object def init self name self name name def get name self return self name 我想做的是写 test foo test p
  • 无法使用 CSS 设置文本区域宽度

    我尝试使用此 CSS 来设置表单元素的宽度 input type text textarea width 250px 如果您查看此 Firefox 屏幕截图 您会发现字段的宽度不同 我在 Safari 中也得到了类似的效果 替代文本 htt
  • 使用 C# 读取数百万个小文件

    我有数百万个每天生成的日志文件 我需要读取所有这些文件并将其放在一起作为单个文件 以便在其他应用程序中对其进行一些处理 我正在寻找最快的方法来做到这一点 目前我正在使用线程 任务和并行 如下所示 Parallel For 0 files L
  • Ruby 脚本即服务

    嗯 标题说明了一切 我有一个 ruby 脚本 我想在我的 Linux 机器上作为一项服务 我可以启动和停止 运行 我找到了如何在 Windows 上执行此操作here https stackoverflow com questions 16
  • Dialogflow 不记名令牌分析

    如何获取 Dialogflow v2beta1 API 调用的不记名令牌 我想集成 Dialogflow API 所以现在我什至无法在没有不记名令牌的情况下在邮递员中测试 API 为了进行测试 我在 GCP 项目中为我的代理生成了 API
  • 打开页面时出现问题(许可协议页面)

    我很困扰 如何在使用应用程序时仅显示一次协议页面 我不知道如何解释这一点 但我正在尝试解释这一点 我正在创建一个应用程序 其中有协议页面 其中有两个按钮 1 按钮名称为Accept 2 按钮名称为拒绝 如果用户单击接受按钮应用程序进入下一页
  • DDMS 显示在线模拟器的空文件资源管理器

    我很多天都面临这个问题 我搜索了很多但没有找到任何方便的答案 每当我启动模拟器时 一段时间后 当我看到 DDMS 时 它会显示模拟器在线 但其文件资源管理器什么也不显示 当我再次重新启动模拟器或重新启动 Eclipse 时 它 会再次可见
  • 有完整的 tomcat 角色列表吗?

    我希望能够完全访问和控制 tomcat 以使我的开发生活变得简单 我知道角色 admin 和 manager 并且知道还有一些带有连字符的角色 例如 manager gui 但在哪里可以找到包含可用角色描述的完整列表 我什至无法在文档中找到
  • 使用 Python 从 PDF 中的物理坐标返回文本字符串

    在过去的几个小时里 我一直在与 Google 和 PDFMiner 的有限文档作斗争 虽然我感觉很接近 但我只是没有得到我需要的东西 我已经经历过http www unixuser org euske python pdfminer htt
  • 简单的 XML 加载文件不起作用

    为什么这不起作用 url http query yahooapis com v1 public yql q select 20 20from 20html 20where 20xpath 3D 22 2F 2Fmeta 22 20and 2
  • Docker nuget连接超时

    尝试利用官方jetbrains teamcity agentKubernetes 上的图像 我已经设法在 Docker 中运行 Docker 但尝试使用以下命令构建 ASP NET Core 映像docker build命令失败于dotne
  • SetLocale 无法在 jsp 站点中以德语格式化货币

    我对 jstl 标签库感到困惑 我想将数字格式化为德国风格的货币 但我尝试的一切都不起作用 我找到了以下示例 但输出是相同的
  • 如何根据 angular.js 中的子复选框选择父复选框?

    我最近一直在使用 Angular js 并决定在选中父复选框后检查所有复选框 我已经使用了ng model and ng checked指令 div div div div