angularJS处理table中checkbox的选中状态
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script> <body> <div ng-app='myApp' ng-controller='myCtrl'>
<div class="container">
<div class="row">
<div class='col-md-10'>
<table class="table table-bordered">
<thead>
<tr>
<th>
<input type="checkbox" ng-model='masterChecked' ng-click='checkMaster()' />
</th>
<th>id</th>
<td>name</td>
<td>age</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in personList">
<td>
<input type="checkbox" ng-checked='item.checked' ng-click='checkChild(item)' />
</td>
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.age}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div> <script>
var myApp = angular.module('myApp', []);
myApp.controller('myCtrl', function ($scope) {
//初始化表格数据
$scope.personList = [{
checked: true,
id: 1,
name: '赵云',
age: 50
}, {
checked: true,
id: 2,
name: '曹操',
age: 60
}, {
checked: true,
id: 3,
name: '大司马',
age: 50
}];
$scope.masterChecked = true
//主复选框选中事件
$scope.checkMaster = function () {
if ($scope.masterChecked == true) {
angular.forEach($scope.personList, function (item, index) {
item.checked = true;
});
} else {
angular.forEach($scope.personList, function (item, index) {
item.checked = false;
});
}
}
//子复选框选中事件
$scope.checkChild = function (item) {
//根据选中状态,调正v.checked值
(item.checked == false) ? item.checked = true : item.checked = false;
//若取消选中,则取消主复选框选中
if (item.checked == false) {
$scope.masterChecked = false;
} else {
//若选中,判断主复选框是否需要选中
var temp = true;
angular.forEach($scope.personList, function (item, index) {
//若子复选框有一个未选中,则主复选框不必选中
if (item.checked == false) {
temp = false;
}
});
//若子复选框全部选中,则选中主复选框
$scope.masterChecked = temp;
}
}
}); </script>
</body> </html>
贴上效果图:
贴上源码:
备注:没有注释,抱歉今天还是一个不擅长做一个注释的小可爱.......
angularJS处理table中checkbox的选中状态的更多相关文章
- html5中checkbox的选中状态的设置与获取
获取checkbox是否选中: $("#checkbox").is(":checked"); 获得的值为true或false. 设置checkbox是否选中: ...
- jQuery判断复选框checkbox的选中状态
通过jQuery设置复选框为选中状态 复选框 <input type="checkbox"/> 错误代码: $("input").attr(&quo ...
- 如何设置Installshield中 feature的选中状态
原文:如何设置Installshield中 feature的选中状态 上一篇: 使用strtuts2的iterator标签循环输出二维数组之前一直有筒子问如何设置Installshield中 feat ...
- android checkbox 未选中状态 已选中状态 替换成自己的图片
效果图: 未选中状态: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA ...
- jQ无法设置checkbox变成选中状态
设置以后checkbox并没有变成选中状态,用chrome调试看了一下,checkbox中确实有checked属性,针对这个问题,大家可以参考下本文 代码如下: $("input" ...
- jquery中CheckBox的checked状态用attr()的问题
写了一个脚本,点按钮时选中checkbox,前几次可以选中,多点几次发现checkbox并未选中,调试后发现checked状态根本没有改变,后在网上查证与attr()函数有关,后改为prop问题解决. ...
- CheckBox 半选中状态
<input type='checkbox' />可以半选中,这个特性,很多浏览器都支持,包括Firefox,Chrome和IE 用 input.indeterminate 这个属性来获取 ...
- checkBox半选中状态
checkbox 可以半选中,这个特性,很多浏览器都支持 // 用 input.indeterminate 这个属性来获取或者设置半选中状态,必须要用 js 添加属性,才有效果. input.inde ...
- table获取checkbox是否选中的几种方法
function test() { $(".table tbody tr").find("td:first input:checkbox").each(func ...
随机推荐
- 【遍历二叉树】09判断二叉树是否关于自己镜像对称【Symmetric Tree】
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 给定一个二叉树,判断是否他自己的镜 ...
- 基于DirectShow和FFmpeg的USB摄像头监控软件-转
第一个版本 ### 软件版本及实现功能 0.0.1 1. USB摄像头枚举和设备信息获取2. 实时视频观看3. 24小时不间断录像,录像文件支持暴风影音播放 ### 软件说明: 软件基于 Direct ...
- prufer BZOJ1211: [HNOI2004]树的计数
以前做过几题..好久过去全忘了. 看来是要记一下... [prufer] n个点的无根树(点都是标号的,distinct)对应一个 长度n-2的数列 所以 n个点的无根树有n^(n-2)种 树 转 p ...
- Poj_1002_java解决
一.Description 电话号码的标准格式是七位十进制数,并在第三.第四位数字之间有一个连接符.电话拨号盘提供了从字母到数字的映射,映射关系如下: A, B, 和C 映射到 2 D, E, 和F ...
- Python-连接Redis并操作
首先开启redis的外连 sch01ar@ubuntu:~$ sudo vim /etc/redis/redis.conf 把bind 127.0.0.1这行注释掉 然后重启redis sudo /e ...
- Sql server 时间格式转化
--.SQL时间格式转化 --日期转换参数 ) --2009-03-15 15:10:02 ),'-',''),' ',''),':','') ) , ) --2009/03/15 ) , ) ) , ...
- Centos6.5安装JDK8教程(一)
[原] 转载请注明原文地址, 保持对知识基本尊重,谢谢! Win7宿主系统 VmWareWorkstation 11应用下的 Centos6.5系统. /******************* ...
- 开启struts2自带的开发模式常量
在以前的开发中,当修改一些配置时总是不能及时地更新到服务器,我们总会重新部署或重启来更新改变的内容,在struts2中可以通过一个常量来达到此目的.即在struts.xml中的<struts&g ...
- [Manacher+bit]Palindrome
https://nanti.jisuanke.com/t/15428 题目大意:离散表示的字符串,求其最长回文串长度. 解题关键:若只用Manacher算法,在统计sum时会超时,所以加一个树状数组来 ...
- c# DateTime.ToString()转换为统一的格式
DateTime.ToString()的转换结果时根据当前电脑的显示格式来转换的,不能同意,而且有些格式我们想将他们重新转换为时间时,会报错,如: 2017/11/21/周二 10:23:57,如果转 ...