<!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. jquery中ON方法的使用

    以前在jquery中绑定动态元素一直使用live,现在才发现live已经被抛弃了,现在如果想实现live方法,可以使用最新的ON方法,具体使用如下: 替换live() live()写法   $('#l ...

  2. CodeForces-734E Anton and Tree 树的直径

    题目大意: 给定一棵有n个节点的树,有黑点白点两种节点. 每一次操作可以选择一个同种颜色的联通块将其染成同一种颜色 现在给定一个初始局面问最少多少步可以让树变为纯色. 题解: 首先我们拿到这棵树时先将 ...

  3. vmware station中 UDEV 无法获取共享存储磁盘的UUID，症状： scsi_id -g -u -d /dev/sdb 无返回结果。

    1.确认在所有RAC节点上已经安装了必要的UDEV包 [root@11gnode1 ~]# rpm -qa|grep udevsystem-config-printer-udev-1.1.16-25. ...

  4. debian软件安装和卸载

    用root身份执行如下命令: dpkg -l |grep "^rc"|awk '{print $2}' |xargs aptitude -y purge dpkg是Debian P ...

  5. Python：更改字典的key

    思路:先删除原键值对,保存值,然后以新键插入字典 格式:dict[newkey] = dict.pop(key) d = {'a':1, 'aa':11} d['b'] = d.pop('a') d[ ...

  6. openstack常见问题汇总

    汇总下常见的问题以及解释下一些比较容易让人萌的参数配置等等 问题汇总1.使用纯文本模式进行复制粘贴,打死不要用word!!!可以解决绝大多数问题,如果你依然执迷不悟,那么就好自为之吧 2.创建路由器时 ...

  7. [51nod1058]求N!的长度

    法1:stirling公式近似 $n! \approx \sqrt {2\pi n} {(\frac{n}{e})^n}$ (如果怕n不够大下式不成立,可以当数小于10000时用for求阶层) 也可以 ...

  8. Entity Framework Code-First（9.2）：DataAnnotations - TimeStamp Attribute

    DataAnnotations - TimeStamp Attribute: TimeStamp attribute can be applied to only one byte array pro ...

  9. redis系列：通过队列案例学习list命令

    前言 这一篇文章将讲述Redis中的list类型命令,同样也是通过demo来讲述,其他部分这里就不在赘述了. 项目Github地址:https://github.com/rainbowda/learn ...

  10. Mac效率工具推荐

    1.Homebrew 命令行安装神器 https://brew.sh/index_zh-cn.html 2.Alfred 类似spotlight,功能更强大 https://www.alfredapp ...