AngularJS 實現複選框 全選/取消全選

之前在百度上找了很多關於用AngularJS實現checkbox全選的功能，但是都只能完成部分功能，下面將需要的功能列出如下：

1、將所有請選擇向的checkbox都選中時，上面的全選也選中。

2、如有一個沒有選中，全選取消。

3、點擊查看按鈕，查看選中的名字有哪些。

在網上找了很多資料，發現很多的都是只能實現前面2個功能，而且還有一點複雜，最後在API上查了一下用ngChecked這個指令可以很輕鬆的實現這個功能。代碼如下

html:

<div ng-controller = 'myCtrl'>    <button ng-click="checkStatus()">查看</button>    <input type = "checkbox" ng-model="selectAll" ng-checked="select" ng-click="changeAll()"/>全選/取消全選 <br/>    <table width="50%">      <thead>        <tr>          <th>請選擇</th>          <th>姓名</th>          <th>生日</th>        </tr>      </thead>      <tbody>      <tr ng-repeat="obj in list">        <td>          <input type = "checkbox" ng-checked="selectAll" ng-click="funcChange()" ng-model="obj.isSelected"/>        </td>        <td>{{obj.name}}</td>        <td>{{obj.birthday}}</td>      </tr>      </tbody>    </table>  </div>

js:

<script>    var app = angular.module("myApp", ['ng']);    app.controller('myCtrl', function ($scope) {      $scope.list = [        {name:'Golde',birthday:'2000-01-10',isSelected:false},        {name:'King',birthday:'1990-01-10',isSelected:false},        {name:'Mark',birthday:'19890-01-10',isSelected:false},        {name:'Marie',birthday:'2010-01-10',isSelected:false}      ];      $scope.checkStatus = function(){        var str = '';        angular.forEach($scope.list,function(value,key){          if(value.isSelected){            str += value.name+"被選中了\n";          }        });        if(str === ''){          str = '都未選中';        }        alert(str);      };//      對於對象進行操作的時候(點擊)，會執行funcChange//      判斷對象數組中isSelected 是否為 true或false，在決定select是否為true      $scope.changeAll = function(){//全選/取消全選        angular.forEach($scope.list,function(v,k){          v.isSelected = $scope.selectAll;        })      };      $scope.funcChange = function(){// 當所有都選中時        $scope.select = true;        angular.forEach($scope.list,function(v,k){          $scope.select = $scope.select && v.isSelected;        });      };    });  </script>

大家可以試試用這個方法。