<!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. Agc003_E Sequential operations on Sequence

    传送门 题目大意 $1,2...n,n$个数从小到大排列,有$m$此操作,每次操作给定一个参数$x$,将当且数列作为循环节无限地展开下去,再取前$x$个作为新的数列,求最终的数列每个数出现的次数. $ ...

  2. Lisp的本质(The Nature of Lisp)

    Lisp的本质(The Nature of Lisp) 作者 Slava Akhmechet                             译者 Alec Jang 出处: http://w ...

  3. 升级MySQL 5.7版本遇到的一些小问题(转)

    在5.6版本服务器做备份 /usr/local/mysql/bin/mysqldump -S /tmp/mysql3306.sock -A -p --set-gtid-purged=OFF > ...

  4. 【转】 Pro Android学习笔记（七七）：服务（2）：Local Service

    目录(?)[-] Local service代码 调用Local ServiceLocal Service client代码 AndroidManifestxml定义Serviceacitivty的l ...

  5. Netty组件

    一.Channel.EventLoop 和ChannelFuture 这些类合在一起,可以被认为是Netty 网络抽象的代表: Channel—Socket: EventLoop—控制流.多线程处理. ...

  6. 人物-IT-任正非：任正非

    ylbtech-人物-IT-任正非:任正非 任正非,祖籍浙江省浦江县,1944年10月25日出生于贵州省安顺市镇宁县.华为技术有限公司主要创始人兼总裁. 1963年就读于重庆建筑工程学院(现已并入重庆 ...

  7. 关于Windows文件读写_暗涌_新浪博客

    关于Windows文件读写_暗涌_新浪博客     这几天在研究怎么才能加快windows文件读写速度,搜了很多文章,MSDN也看了不少.稍微给大家分享一下.     限制windows文件读写速度的 ...

  8. React组件详细介绍及其生命周期函数

    组件的详细说明 通过Reac.createClass({...})创建组件的时候,应该有一个render()方法,也可以在其中添加生命周期函数. render方法 当调用该方法的时候,会检测this. ...

  9. Maven的pom实例

    该pom中包含了一些我认为会需要的东西,并且加了注释.可以根据需求适当删减. 包含了spring-mvc , junit,hibernate验证,json,apache-commons组件 还有 co ...

  10. 7.XXEinjector：一款功能强大的自动化XXE注射工具

    今天给大家介绍的是一款名叫XXEinjector的漏洞利用工具,XXEinjector是一款基于Ruby的XXE注入工具, 它可以使用多种直接或间接带外方法来检索文件.其中,目录枚举功能只对Java应 ...