<!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的选中状态的更多相关文章

  1. html5中checkbox的选中状态的设置与获取

    获取checkbox是否选中: $("#checkbox").is(":checked"); 获得的值为true或false. 设置checkbox是否选中: ...

  2. jQuery判断复选框checkbox的选中状态

    通过jQuery设置复选框为选中状态 复选框 <input type="checkbox"/> 错误代码: $("input").attr(&quo ...

  3. 如何设置Installshield中 feature的选中状态

    原文:如何设置Installshield中 feature的选中状态 上一篇: 使用strtuts2的iterator标签循环输出二维数组之前一直有筒子问如何设置Installshield中 feat ...

  4. android checkbox 未选中状态 已选中状态 替换成自己的图片

    效果图: 未选中状态: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA ...

  5. jQ无法设置checkbox变成选中状态

    设置以后checkbox并没有变成选中状态,用chrome调试看了一下,checkbox中确实有checked属性,针对这个问题,大家可以参考下本文 代码如下: $("input" ...

  6. jquery中CheckBox的checked状态用attr()的问题

    写了一个脚本,点按钮时选中checkbox,前几次可以选中,多点几次发现checkbox并未选中,调试后发现checked状态根本没有改变,后在网上查证与attr()函数有关,后改为prop问题解决. ...

  7. CheckBox 半选中状态

    <input type='checkbox' />可以半选中,这个特性,很多浏览器都支持,包括Firefox,Chrome和IE 用 input.indeterminate 这个属性来获取 ...

  8. checkBox半选中状态

    checkbox 可以半选中,这个特性,很多浏览器都支持 // 用 input.indeterminate 这个属性来获取或者设置半选中状态,必须要用 js 添加属性,才有效果. input.inde ...

  9. table获取checkbox是否选中的几种方法

    function test() { $(".table tbody tr").find("td:first input:checkbox").each(func ...

随机推荐

  1. POJ1904 King's Quest

    King's Quest Language:Default King's Quest Time Limit: 15000MS Memory Limit: 65536K Total Submission ...

  2. bzoj 2732: [HNOI2012]射箭 半平面交

    题目大意: http://www.lydsy.com/JudgeOnline/problem.php?id=2732 题解: 这道题的做法我不想说什么了... 其他题解都有说做法... 即使是我上午做 ...

  3. BZOJ2563阿狸和桃子的游戏

    2563: 阿狸和桃子的游戏 Time Limit: 3 Sec  Memory Limit: 128 MBSubmit: 952  Solved: 682[Submit][Status][Discu ...

  4. delete操作符

    delete操作符通常用来删除对象的属性: Js代码     var o = { x: 1 }; delete o.x; // true o.x; // undefined 而不是一般的变量: Js代 ...

  5. js字符串API

    1.charAt(n) :返回字符串n位置的字符 2.substr(n,m):n:开始截取的位置 m:截取的长度 2.substring(n,m):n:开始截取的位置 m:截取结束的位置 3.repl ...

  6. tomcat部署虚拟主机-搭建两个应用以及httpd和Nginx的反向代理

    实验环境:CentOS7 前提:已经安装好tomcat,未安装请查看http://www.cnblogs.com/wzhuo/p/7111135.html: 目的:基于主机名访问两个应用: [root ...

  7. nginx的安装及基本配置

    在CentOS7(mini)上安装: [root@~ localhost]#lftp 172.16.0.1 lftp 172.16.0.1:/pub/Sources/7.x86_64/nginx> ...

  8. Spring整合JUnit4测试时，使用注解引入多个配置文件

    转自:https://blog.csdn.net/pwh309315228/article/details/62226372 一般情况下: @ContextConfiguration(Location ...

  9. [xdoj1158]阶乘求逆元(常用于求组合数)

    http://acm.xidian.edu.cn/problem.php?id=1158 解题关键:此题注意将$\sum\limits_{i = 0}^x {C_x^iC_y^{i + k}}$转化为 ...

  10. JVM原理解析

    JVM主要的功能: 内存分配 程序调度 内存释放(栈等自动释放.堆垃圾回收) 异常处理 https://www.cnblogs.com/dingyingsi/p/3760447.html https: ...