這里用到AngularJS四大特性之二----雙向數據綁定
注意：沒寫一行DOM代碼！這就是ng的優點，bootstrap.css為了布局，JS代碼也只是簡單創建ng模塊和ng控制器
效果：
<!DOCTYPE html> <html lang="en" ng-app="myModule5"><!--3、ng-app="myModule5"啟動ng並調用模塊--> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="css/bootstrap.css"> <title>全選/取消全選</title> </head> <body> <div class="container" ng-controller="myCtrl5"><!--4、ng-controller="myCtrl5"啟用控制器--> <h2>全選和取消全選</h2> <table class="table table-bordered"> <thead> <tr> <th>選擇</th> <th>姓名</th> <th>操作</th> </tr> </thead> <tbody> <tr> <td> <input ng-checked="selectAll" type="checkbox"> </td> <td>Tom</td> <td> <button class="btn btn-danger btn-xs">刪除</button> </td> </tr> <tr> <td> <input ng-checked="selectAll" type="checkbox"> </td> <td>Mary</td> <td> <button class="btn btn-danger btn-xs">刪除</button> </td> </tr> <tr> <td> <input ng-checked="selectAll" type="checkbox"> </td> <td>King</td> <td> <button class="btn btn-danger btn-xs">刪除</button> </td> </tr> </tbody> </table> <input type="checkbox" ng-model="selectAll"> <span ng-hide="selectAll">全選</span> <span ng-show="selectAll">取消全選</span> </div> <script src="js/angular.js"></script><!--1、引入angularJS--> <script> //2、創建自定義模塊和控制器 angular.module('myModule5', ['ng']). controller('myCtrl5', function($scope){ }); </script> </body> </html>