angularjs實現checkbox的點擊-全選功能-選中數據

簡單思路：

（1）全選的checkbox的ng-checked設置為函數isAllSelected，即isAllSelected返回true則列表的各項全部選中，否則都不選中；
（2）同時給列表各項的checkbox的ng-checked設置為各數據項的屬性isChecked，該屬性為前端處理后台數據時主動加上的，用於區分單項是否選中；
（3）再分別給全選及各個列表項的checkbox加上點擊事件；
（4）全選的點擊事件處理：isAllSelected返回為true，forEach遍歷列表項數據的isChecked都設置為false；isAllSelected返回為false，forEach遍歷列表項數據的isChecked都設置為true；
（5）各單項的點擊事件處理：當前項的isChecked為true，點擊之后設置為false；當前項的isChecked為false，點擊之后設置為true；直接取反
（6）filter過濾出列表數據中isChecked為true的數據

<table>
    <thead>
          <tr>
             <th><input type="checkbox" ng-checked="isAllSelected()" ng-click="selectAllItems(all)" ></th>
 　　　　　</tr>

    </thead>
    <tbody> 
         <tr ng-repeat="item in list"> 
            <td><input type="checkbox" ng-checked="all" ng-model="item.isChecked" ng-click="selectItems(item)"></td>
         </tr> 
    </tbody> 
</table>

 

$scope.selectAllItems = selectAllItems;
$scope.selectItems = selectItems;
$scope.getSelectData= getSelectData;
$scope.isAllSelected = isAllSelected;

function isAllSelected() {
   return $scope.list.every(item => item.isChecked)
}

// 全選 
function selectAllItems(){

   const isAll =  isAllSelected();
   $scope.list.forEach(item => item.isChecked = !isAll)

} 


// 依次選 
function selectItems(item) { 

   item.isChecked = !item.isChecked;

 } 

// 選中數據 
function getSelectData() { 
   const selectData = $scope.list.filter(item => item.isChecked); 　　
   console.log(selectData) 
}