<!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. ECMAScript基本函数、概念区分总结

    1.使用Number()和parseInt() parseFloat()转换区别. 详见<JavaScript高级程序设计>P30 Number()可以针对任何类型. parseInt() ...

  2. mac下安装node

    学着使用homebrew进行安装,发现很是方便. homebrew是mac下的一款管理安装的工具. 1. 安装homebrew 使用mac自带的ruby下载安装: ruby -e "$(cu ...

  3. Centos6.5安装上传下载工具

    执行下面命令即可. sudo yum install lrzsz rz 是上传命令 sz filename是下载命令 如果rz上传文件时提示 was skipped,则用sudo rz命令来进行上传.

  4. C#对SQL数据库操作类简介：Connection、Command、DataReader、DataSet、DataAdapter

    在说C#操作数据库之前需要先说下ADO.NET.ADO.NET的名称起源于ADO(ActiveX Data Objects),是一个COM组件库,用于在以往的Microsoft技术中访问数据.之所以使 ...

  5. ASP.NET Core 中文文档 第四章 MVC（2.2）模型验证【转载】

    http://www.cnblogs.com/dotNETCoreSG/p/aspnetcore-4_2_2-validation.html 介绍模型验证 在一个应用程序将数据存储到数据库之前,这个应 ...

  6. LaTeX技巧203：如何实现等号对齐_LaTeX_Fun_新浪博客

    LaTeX技巧203:如何实现等号对齐_LaTeX_Fun_新浪博客 我们在进行公式的输入排版的时候,通常希望公式比较齐整,所以需要一些等号对齐,或者左对齐,关于公式的左对齐前文已经介绍了方法.htt ...

  7. [matlab]Monte Carlo模拟学习笔记

    理论基础:大数定理,当频数足够多时,频率可以逼近概率,从而依靠概率与$\pi$的关系,求出$\pi$ 所以,rand在Monte Carlo中是必不可少的,必须保证测试数据的随机性. 用蒙特卡洛方法进 ...

  8. [原创]SQL表值函数：获取从当月计算起往前自定义月份数

      今天我现在发现看一篇博文不能够太长,只要能够描述清楚自己想表达的东西,能够让大家知道你要讲什么就行了.因为我今天看了一些长篇博文,真的觉得知识点太多了, 会让人囫囵吞枣. 这篇博文跟我昨天发表的类 ...

  9. JavaScript中的真和假,==和===, 不等

    咋JS中,下面这些值表示 “假”: "" (empty string) 0,-0,NaN (invalid number) null, undefined false 除了上面这些 ...

  10. 1.如何绕过WAF（Web应用防火墙）

    一:大小写转换法: 看字面就知道是什么意思了,就是把大写的小写,小写的大写.比如: SQL:sEleCt vERsIoN(); ‍‍XSS:)</script> 出现原因:在waf里,使用 ...