<!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. cocos2d-x 中 xml 文件读取

    实现类 CXmlParse 啥也不说了  直接上硬货  believe yourself   一看就明白 CXmlParse.h #ifndef __C_XML_PARSE__ #define __C ...

  2. unity中mesh属性的uv坐标讨论

    http://blog.sina.com.cn/s/blog_427cf00b0102vp0j.html 之前在做连连看游戏中,也用到贴图坐标,当时我们讲到,不管是平铺(Tiling)还是偏移(Off ...

  3. iOS中的日期和时间

    转载于http://www.jianshu.com/p/ee279c175cf8 一.时间和日期计算 我们在应用开发中,时常需要和时间打交道,比如获取当前时间,获取两个时间点相隔的时间等等,在iOS开 ...

  4. Azure自动化部署服务 (1)

    Azure中已经发布了自动化部署服务的PaaS功能. 本文将介绍自动化服务Automation初始化过程. 在Azure Management Portal上左边可以看到Azure的各种服务,其中一项 ...

  5. 【转】Pro Android学习笔记（十五）：用户界面和控制（3）：Button控件

    目录(?)[-] 基础Button ImageButton ToggleButton CheckBox RadioButton 基础Button Button是最常用的基础控件之一,在Android中 ...

  6. java用write()拷贝一个文本文件

    总结:灵活运用循环语句,或条件判断语句.每一种流的正确使用方法: 这里是两种方法: package com.ds; import java.io.*; public class tyut { /*pu ...

  7. 自己写的一个多应用程序多目录的Makefile

    DIR_INC = ./includeDIR_SRC = ./srcDIR_OBJ = ./objDIR_BIN = ./binINCLUDES = -I${DIR_INC} -I.CC => ...

  8. mariadb的读写分离

    实验环境:CentOS7 设备:一台主数据库服务器,两台从数据库服务器,一台调度器 主从的数据库配置请查阅:http://www.cnblogs.com/wzhuo/p/7171757.html : ...

  9. Sql server 备份及还原

    --最常用的几种备份方法: --数据备份----------------------- --数据库级:完整数据库备份 差异数据库备份 --文件级: 完整文件备份 差异文件备份 --日志备份------ ...

  10. hibernate.PropertyAccessException: Null value was assigned to a property of primitive type

    日志: [WARN-2016/07/26/18/:45/:52]ProcessEngineServiceImpl.(257) - 审批流程log日志--submitProcess方法:提交人userI ...