angularJS处理table中checkbox的选中状态

贴上效果图：
贴上源码：
<!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="row in personList">
                                <td>
                                    <input type="checkBox" ng-checked=‘row.checked‘ ng-click=‘checkChild(row)‘ />
                                </td>
                                <td>{{row.id}}</td>
                                <td>{{row.name}}</td>
                                <td>{{row.age}}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

            
    <script>
        var@H_448_403@ myApp @H_448_403@=@H_448_403@ angular.module(@H_448_403@‘@H_448_403@myApp@H_448_403@‘@H_448_403@,[]);
        myApp.controller(@H_448_403@‘@H_448_403@myCtrl@H_448_403@‘@H_448_403@,function@H_448_403@ ($scope) {
            //初始化表格数据
@H_448_403@            $scope.personList @H_448_403@=@H_448_403@ [{
                checked: false@H_448_403@,id: @H_448_403@1@H_448_403@,name: @H_448_403@‘@H_448_403@赵云@H_448_403@‘@H_448_403@,age: @H_448_403@50@H_448_403@
            },{
                checked: false@H_448_403@,id: @H_448_403@2@H_448_403@,name: @H_448_403@‘@H_448_403@曹操@H_448_403@‘@H_448_403@,age: @H_448_403@60@H_448_403@
            },id: @H_448_403@3@H_448_403@,name: @H_448_403@‘@H_448_403@大司马@H_448_403@‘@H_448_403@,age: @H_448_403@50@H_448_403@
            }];
            //主复选框选中事件
@H_448_403@            $scope.checkMaster @H_448_403@= function@H_448_403@ () {
                if@H_448_403@ ($scope.masterChecked @H_448_403@== true@H_448_403@) {
                    angular.forEach($scope.personList,function@H_448_403@ (row,index) {
                        row.checked @H_448_403@= true@H_448_403@;
                    });
                } else@H_448_403@ {
                    angular.forEach($scope.personList,index) {
                        row.checked @H_448_403@= false@H_448_403@;
                    });
                }
            }
            //子复选框选中事件
@H_448_403@            $scope.checkChild @H_448_403@= function@H_448_403@ (row) {
                //根据选中状态，调正row.checked值
@H_448_403@                (row.checked @H_448_403@== false@H_448_403@) @H_448_403@?@H_448_403@ row.checked @H_448_403@= true@H_448_403@ : row.checked @H_448_403@= false@H_448_403@;
                //若取消选中，则取消主复选框选中
                if@H_448_403@ (row.checked @H_448_403@== false@H_448_403@) {
                    $scope.masterChecked @H_448_403@= false@H_448_403@;
                } else@H_448_403@ {
                    //若选中，判断主复选框是否需要选中
                    var@H_448_403@ temp @H_448_403@= true@H_448_403@;
                    angular.forEach($scope.personList,index) {
                        //若子复选框有一个未选中，则主复选框不必选中
                        if@H_448_403@ (row.checked @H_448_403@== false@H_448_403@) {
                            temp @H_448_403@= false@H_448_403@;
                        }
                    });
                    //若子复选框全部选中，则选中主复选框
@H_448_403@                    $scope.masterChecked @H_448_403@=@H_448_403@ temp;
                }
            }
        });

    </script>
</body>

</html>
angularJS处理table中checkbox的选中状态

猜你在找的Angularjs相关文章
