angularJS processing table selected in the checkbox

Paste renderings:
Paste Source:
<!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 myApp = angular.module ( ' myApp ' , []); 
        myApp.controller ( ' myCtrl ' , function ($ scope) {
             // initialization data table 
            $ scope.personList = [{ 
                the checked: to false , 
                ID: . 1 , 
                name: ' Zhao ' , 
                Age: 50 
            }, { 
                the checked: to false , 
                ID:2 , 
                name: ' Cao ' , 
                Age: 60 
            }, { 
                the checked: to false , 
                ID: . 3 , 
                name: ' Sima ' , 
                Age: 50 
            }]; 
            // main event checkbox 
            $ scope.checkMaster =  function ( ) {
                 IF ($ scope.masterChecked ==  to true ) { 
                    angular.forEach ($ scope.personList, function(Row, index) { 
                        row.checked = to true ; 
                    }); 
                } the else { 
                    angular.forEach ($ scope.personList, function (Row, index) { 
                        row.checked = to false ; 
                    }); 
                } 
            } 
            // child check marquee event 
            $ scope.checkChild =  function (Row) {
                 // according to the selected state, adjustment row.checked value 
                (row.checked ==  false ) ?row.checked =  to true : row.checked =  to false ;
                 // if unchecked checkbox is canceled main 
                IF (row.checked ==  to false ) { 
                    $ scope.masterChecked =  to false ; 
                } the else {
                     // If selected, determining whether the main box need to select 
                    var TEMP =  to true ; 
                    angular.forEach ($ scope.personList, function (Row, index) {
                         // if there is a sub-box is not selected, without selecting the checkbox master 
                        iF (Row .checked ==  false) { 
                            TEMP =  to false ; 
                        } 
                    }); 
                    // if all selected sub-box, check box main 
                    $ scope.masterChecked = TEMP; 
                } 
            } 
        }); 

    </ Script > 
</ body > 

</ HTML >
Note: There is no comment, sorry is not good today and make a note of a little cute .......
angularJS processing table selected in the checkbox

Guess you like
