最近在做的一个项目要增加全选和反选功能，之前只做过JQ版的全选和反选。

实现效果：

1.点击全选checkbox可以切换全选和全部清空

2.点击列表中的checkbox，当全部选中时全选选中

3.在全选状态下点击列表中的checkbox将其置为非选中状态时全选checkbox也变为非选中状态

一开始看到是angular项目上面加全选以后不造如何下手。

步骤一：

然后就上网找资料，发现一个很不错的demo，结果把它放到项目中时发现它实现不了需求2和3，当时以为是自己的写法有问题，又去玩了下那个demo，发现那个demo只能实现功能1。

demo地址：

教训：以后遇到demo要先全部玩过以后再放到项目里面用。

步骤二：

然后后面又找到一个博客，这个是里面的方法可以完美实现我的需求。我采用的是方法3放到项目中进行的验证，在此把所用部分代码贴出来。到项目里面的时候根据项目实际情况替换参数即可。

博客地址：

成功案例：

html

     
    
      全选                
      
        
       
                        {
   {id}}        
    
      
     

angular

var app = angular.module('myApp',[]);app.controller('myController', ['$scope', function ($scope) {    $scope.list = [        {
    'id': 101},        {
    'id': 102},        {
    'id': 103},        {
    'id': 104},        {
    'id': 105},        {
    'id': 106},        {
    'id': 107}    ];    $scope.m = [];    $scope.checked = [];    $scope.selectAll = function () {        if($scope.select_all) {            $scope.checked = [];            angular.forEach($scope.list, function (i) {                i.checked = true;                $scope.checked.push(i.id);            })        }else {            angular.forEach($scope.list, function (i) {                i.checked = false;                $scope.checked = [];            })        }        console.log($scope.checked);    };    $scope.selectOne = function () {        angular.forEach($scope.list , function (i) {            var index = $scope.checked.indexOf(i.id);            if(i.checked && index === -1) {                $scope.checked.push(i.id);            } else if (!i.checked && index !== -1){                $scope.checked.splice(index, 1);            };        })        if ($scope.list.length === $scope.checked.length) {            $scope.select_all = true;        } else {            $scope.select_all = false;        }        console.log($scope.checked);    }}]);