多选框实现全选_Angular1.x-checkbox-全选amp;单选amp;多选

af11cb6e27a07b3d7f0cef4d1ac4f47a.png
ng-checked:Angular里ng-checked属性影响复选框的状态,值=>true则复选框选中,值=>false则取消选中。

67af53bba3ba3234d0ae84afae158d7f.png

HTML:

       <div class="col-lg-4"><fieldset><legend>选题列表</legend><div class="table-responsive" style="border:0px;padding:3px;padding:0px;height:550px;overflow-y:scroll;"><table class="table table-bordered table-striped"><thead><tr><th><input type="checkbox" ng-checked="isAllSelect" ng-click="selectAll($event)" /></th><th>序号</th><th>题目</th></tr></thead><tbody><tr ng-repeat="x in viewModel.measureTableTopicInfos"><td><input type="checkbox" ng-model="x.isChecked" ng-click="onchecked(x,$event)" ng-checked="x.isChecked"></td><th scope="row">{{$index+1}}</th><td>{{x.title}}</td></tr></tbody></table></div></fieldset></div>

Js部分:

//复选框事件$scope.onchecked = function (obj, evn) {var list = [];if (evn.target.checked) {angular.forEach($scope.viewModel.measureTableTopicInfos, function (value, key) {if (value.isChecked == true) {list.push(value.code);}});} else {angular.forEach($scope.viewModel.measureTableTopicInfos, function (value, key) {if (value.isChecked == true) {list.push(value.code);}});}//清空数组......//全选按钮是否选中......}//全选$scope.selectAll = function ($event) {//如果全选了if ($event.target.checked) {var list = [];$scope.isAllSelect = true;angular.forEach($scope.viewModel.measureTableTopicInfos, function (value, key) {list.push(value.code);value.isChecked = true; //全部设置成全选});$scope.viewModel.measureTableDivisorTopicInfos.splice(0, $scope.viewModel.measureTableDivisorTopicInfos.length);for (var i = 0; i < list.length; i++) {//......业务Code}} else {$scope.isAllSelect = false;angular.forEach($scope.vm.viewModel.measureTableTopicInfos, function (value, key) {value.isChecked = false; //全部设置成不选});}}                       

简单粗暴的实现!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/527057.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

2020笔记本性价比之王_什么笔记本性价比高?2020性价比最高的笔记本电脑

阅读本文前&#xff0c;请您先点击上面的蓝色字体&#xff0c;再点击“关注”&#xff0c;这样您就可以继续免费收到最新文章了。每天都有分享。完全是免费订阅&#xff0c;请放心关注。注&#xff1a;本文转载自网络&#xff0c;不代表本平台立场&#xff0c;仅供读者参考&…

前端请求接口post_接口自动化测试-WEB资讯专栏-DMOZ中文网站分类目录

为什么UI自动化维护成本更高&#xff1f;因为前端页面变化太快&#xff0c;而且UI自动化比较耗时(比如等待页面元素的加载、添加等待时间、定位元素、操作元素、模拟页面动作这些都需要时间)为什么接口自动化维护成本较低&#xff1f;因为接口较稳定&#xff0c;接口的响应时间…

Windows虚拟服务器vm,史上最详细的虚拟机VMware12安装Windows7教程 | 心塞塞

首先你电脑必须安装了 VMware &#xff0c;推荐版本 VMware12 或者 VMware 11 版本&#xff0c;然后你还需要一个系统镜像&#xff0c;可以通过下面链接下载 Win7 的镜像&#xff0c;复制链接&#xff0c;打开迅雷新建任务即可下载&#xff1a;Windows7 64位1ed2k://|file|cn_w…

方法 手写promise_JS探索-手写Promise

无意间在知乎上刷到Monad这个概念&#xff0c;去了解了一下&#xff0c;前端的Promise就是一种Monad模式&#xff0c;所以试着学习一下手写一个Promise.本文内容主要参考于只会用&#xff1f;一起来手写一个合乎规范的Promise​www.jianshu.comPromise是什么所谓Promise&#x…

12如何隐藏dock栏_一键隐藏 iPhone 刘海和底部 Dock 栏,简洁又好看

技能&#xff1a; 隐藏刘海和底部dock 栏难度系数&#xff1a;2颗星适用系统&#xff1a;iOS 13(部分非iOS13也适用)最近&#xff0c;小雷打开手机&#xff0c;看到最多的关键词&#xff0c;就是&#xff1a;iOS13又双叒叕更新了。。。而且也看到不止一位网友晒这个有趣的新功能…

宝塔php安装那个合_使用宝塔面板安装nextcloud | 启用本地存储 | 安装smbclient

宝塔面板安装nextcloud | 启用本地存储使用宝塔面板搭建nextcloud服务后&#xff0c;在设置外部存储时总是无法启用本地存储。问题1&#xff1a;提示&#xff1a;“smbclient” 未安装。无法挂载 "SMB / CIFS", "SMB / CIFS 使用 OC 登录信息"。请联系管理…

mysql groupby 拼接_mysql groupby 字段合并问题(group_concat)

在我们的日常mysql查询中&#xff0c;我们可能会遇到这样的情况&#xff1a;对表中的所有记录进行分类&#xff0c;并且我需要得到每个分类中某个字段的全部成员。上面的话&#xff0c;大家看起来可能不太好懂&#xff0c;下面举一个例子来给大家说明。现在我们有一张表&#x…

mysql聚集索引 myisam_一句话说清聚集索引和非聚集索引以及MySQL的InnoDB和MyISAM

版权声明&#xff1a;本文为博主原创文章&#xff0c;未经博主允许不得转载。https://blog.csdn.net/21aspnet/article/details/89303988聚集索引和非聚集索引以及MySQL的InnoDB和MyISAM经常遇到有人向我咨询这个问题&#xff0c;其实呢&#xff0c;网上帖子很多&#xff0c;也…

ue4插件导入导出_Blender到UE4的无缝衔接

Hello . 大家好本文给大家介绍一下Send To Unreal插件我是Vee1简介Send To Unreal是Epic官方开发的用于Blender和UE4快速同步的插件&#xff0c;支持静态物体、骨骼物体、动画等等。省去了Blender导出-选择目录文件-UE4导入这个中间步骤&#xff0c;效率提升不是一般得多。插件…

mysql点击计数器_MySql计数器,如网站点击数,如何实现高性能高并发的计数器功能...

MySql计数器&#xff0c;如网站点击数&#xff0c;如何实现高性能高并发的计数器功能Clicks: 5338 Date: 2014-03-29 23:30:42 Power By 李轩LaneTagMysql计数器高性能现在有很多的项目&#xff0c;对计数器的实现甚是随意&#xff0c;比如在实现网站文章点击数的时候&#xff…

python 微服务架构_微服务架构(Python)

在后端开发方面&#xff0c;Java的使用呢要远比Python广泛&#xff0c;所以Java的微服务框架非常流行&#xff0c;但Python的微服务框架却很少有人问津。在大多数需要微服务的场合下直接用Java的各种工具就可以解决问题&#xff0c;但如果业务代码使用Python写的&#xff0c;那…

vue修改入口文件名字_webpack打包vue项目,可修改配置文件

问题&#xff1a;vue项目打包完成后&#xff0c;如需改变配置文件中的信息&#xff0c;比如域名修改(如下图config.js)&#xff0c;是不可能在配置文件中直接更改的&#xff0c;因为配置文件是前端写死的&#xff0c;这时只能手动更改项目中的配置&#xff0c;然后重新打包npm …

java判断正整数正则_Java正则验证正整数的方法分析【测试可用】

本文实例讲述了Java正则验证正整数的方法。分享给大家供大家参考&#xff0c;具体如下&#xff1a;package des;import java.util.regex.Matcher;import java.util.regex.Pattern;public class Num {/*** param args*/public static void main(String[] args) {// TODO Auto-ge…

java 官网下载jdk源码_openJDK之如何下载各个版本的openJDK源码

如果我们需要阅读openJDK的源码&#xff0c;那么需要下载&#xff0c;那么该去哪下载呢?现在JDK已经发展到版本10了&#xff0c;11已经处于计划中&#xff0c;如果需要特定版本的openJDK&#xff0c;它们的下载链接在哪呢?1.openJDK的项目图1 可以看到有openJDK6、openJDK7、…

java 最大分词算法_Java实现的最大匹配分词算法详解

本文实例讲述了java实现的最大匹配分词算法。分享给大家供大家参考&#xff0c;具体如下&#xff1a;全文检索有两个重要的过程&#xff1a;1分词2倒排索引我们先看分词算法目前对中文分词有两个方向&#xff0c;其中一个是利用概率的思想对文章分词。 也就是如果两个字&#x…

java jnotify_Jnotify文件监控的用法以及Jar文件导入的方法

简介Jnotiy, 支持动态监控(支持级联监控)文件夹和文件的jar包。在linux中&#xff0c;调用linux底层的jnotify服务。在windows中&#xff0c;需要添加附件的dll文件。因为通用的Maven仓库中没有此Jar文件&#xff0c;pom.xml文件需要如下配置&#xff1a;net.contentobjects.jn…

java 异常练习题_Java 异常(习题)

异常Key Point* 异常的概念和分类* 异常的产生和传递* 异常的处理* 自定义异常练习1. 填空Java 中所有的错误都继承自throwable类&#xff1b;在该类的子类中&#xff0c;Error类表示严重的底层错误&#xff0c;对于这类错误一般处理的方式是不要求我们对其处理Exception类表示…

mysql 半同步 主主_MySQL主从,半同步,主主复制

MySQL Replication我们知道&#xff0c;MySQL数据库的二进制日志记录着每一个明确或者潜在可能导致数据库发生改变的sql语句&#xff0c;因此我们可以基于二进制日志来实现mysql的主从一致。而我们在此提到的mysql的复制的简单过程就是&#xff1a;首先mysql的主服务器(Master)…

java 数据队列_Java 数据结构 - 队列

Java 数据结构 - 队列我们今天要讲的数据结构是队列&#xff0c;比如 Java 线程池任务就是队列实现的。1. 什么是队列和栈一样&#xff0c;队列也是一种操作受限的线性结构。使用队列时&#xff0c;在一端插入元素&#xff0c;而在另一端删除元素。1.1 队列的主要特性队列中的数…

java+set+split_阿里资深工程师教你如何优化 Java 代码!

原标题&#xff1a;阿里资深工程师教你如何优化 Java 代码&#xff01;作者 | 王超责编 | 伍杏玲明代王阳明先生在《传习录》谈为学之道时说&#xff1a;私欲日生&#xff0c;如地上尘&#xff0c;一日不扫&#xff0c;便又有一层。着实用功&#xff0c;便见道无终穷&#xff0…