チェックボックスで選択されたangularJS処理テーブル

貼り付けレンダリング：

 

ソースを貼り付けます。

 

<！DOCTYPE HTML > 
< HTML > 

< ヘッド> < メタ文字コード= "UTF-8" > < タイトル> </ タイトル> < リンクのrel = "スタイルシート" のhref = "https://cdn.staticfile.org/twitter-bootstrap/ 3.3.7 / CSS / bootstrap.min.css " > < スクリプトSRC = "https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js" > </ スクリプト> < スクリプトSRC =" https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min。     
    
    
    
    
    
    < スクリプトSRC = "https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js" > </ スクリプト> 

< 身体> < divのNG-アプリ= 'て、myApp' NG-コントローラ= 'myCtrl' > < DIV クラスは= "コンテナ" > < DIV クラスは= "行" > < DIV クラス= 'COL-MD-10' > < テーブルクラス= "テーブルのテーブルボーダー" > < THEAD > <TR > < 目> <
         
     
        
            
                
                    
                        
                            
                                
                                    入力タイプ= "チェックボックス" NG-モデル= 'masterChecked' NGクリック= 'CHECKMASTER（）' /> 
                                </ 目> 
                                < 目>のid </ 目> 
                                < TD >名前</ TD > 
                                < TD >年齢</ TD > 
                            </ TR > 
                        </ THEAD > 
                        < TBODY > 
                            < TR NGリピート= "行personListで" > 
                                < TD >
                                    < 入力タイプ= "チェックボックス" NG-チェック= 'はrow.checked' NGクリック= 'checkChild（行）' /> 
                                </ TD > 
                                < TD > {{row.id}} </ TD > 
                                < TD > {{行。名前}} </ TD > 
                                < TD > {{row.age}} </ TD > 
                            </ TR > 
                        </ TBODY > 
                    </ テーブル> 
                </ DIV > 
            </ DIV > 
        </ DIV > 
    </ DIV > <

            
    スクリプト> 
        VAR て、myApp = angular.module（' て、myApp ' 、[]）; 
        myApp.controller（' myCtrl ' 、関数（$スコープ）{
             // 初期化データテーブル
            $ scope.personList = [{ 
                チェック：falseに、
                ID：1。、
                名称：' 趙' 、
                年齢：50 
            }、{ 
                チェック：falseに、
                ID：2 、
                名称：' ツァオ' 、
                年齢：60 
            }、{ 
                チェック：falseに、
                ID：3。 、
                名称：' シマ' 、
                年齢：50 
            }]; 
            // メインイベントチェックボックス
            $ scope.checkMaster =  関数（ ）{
                 IF （$ scope.masterChecked ==  trueに）{ 
                    angular.forEach（$ scope.personList、関数（行、インデックス）{ 
                        row.checked = trueに; 
                    }）; 
                } 他{ 
                    angular.forEach（$ scope.personList、機能（行、インデックス）{ 
                        row.checked = falseに; 
                    }）; 
                } 
            } 
            // 子チェックマーキーイベント
            $ scope.checkChild =  関数（行）{
                 // 選択された状態に応じて、調整row.checked値
                （row.checked ==  偽）？row.checked =  trueに：row.checked =  falseに;
                 // 未確認のチェックボックスがメインキャンセルされた場合
                のIF （row.checked ==  falseに）{ 
                    $ scope.masterChecked =  falseに; 
                } 他に{
                     // 選択した場合は、メインボックスを選択する必要があるかどうかを決定
                    するvar TEMPを=  trueに、
                    angular.forEach（$ scope.personList、関数（行インデックス）{
                         // サブボックスがある場合がチェックボックスマスタを選択せず、選択されていない
                        場合（行.checkedを==  falseを）{ 
                            TEMP =  falseに; 
                        } 
                    }）; 
                    // 場合は、すべての選択されたサブボックス、ボックスメインチェック
                    $ scope.masterChecked = TEMPを; 
                } 
            } 
        }）; 

    </ スクリプト> 
</ ボディ> 

</ HTML >

 

申し訳ありません今日は良くありません、何のコメントはありませんし、小さなかわいいを書き留めます.......注：