全选功能相信大家都遇到过，如果全选只是简单的全部选中，全部取消勾选，无疑是一个很简单的功能，但是在相互控制的情况下有些问题就可能考虑不周。这里的相互控制是指：全选复选框控制列表所有项的全部选中和反全选，一项一项勾选列表项至每一项都勾选时，全选复选框状态也被选中，列表项其中一个取消勾选，全选状态取消选中。

方法一： $watch监听

<div style="width: 800px; margin: 200px auto 0;">
    <p>
        <label>
            <input type="checkbox" ng-model="all">全选
        </label>
    </p>
    <label class="margin-right-20" ng-repeat="item in list">
        <input type="checkbox" ng-model="item.selectedStatus">{{item.name}}{{$index}}
    </label>
</div>

// 监听全选
$scope.$watch("all", function (n, o) {
    if (n) {
        // 全选
        $scope.list.forEach(function (value) {
            value.selectedStatus = true;
        });
    } else {
        // 判断是反全选还是列表项中有某些项没选造成全选复选框为false
        var midStatus = true;
        $scope.list.forEach(function (value) {
            midStatus = midStatus && value.selectedStatus;
        });
        // 如果列表项全是true，那么反选
        if (midStatus) {
            $scope.list.forEach(function (value) {
                value.selectedStatus = false;
            });
        }
    }
});

// 监听列表 全选的选中状态根据列表项的 && 值确定
$scope.$watch("list", function (n, o) {
    var midStatus = true;
    $scope.list.forEach(function (value) {
        midStatus = midStatus && value.selectedStatus;
    });
    $scope.all = midStatus;
}, true)

坑：在列表初始化时，如果默认列表是全部选中，由于相互监听，会导致初始化全部选中实际操作是反全选。

解决方案： 在初始化过程中先不去执行监听全选，等初始化之后再去执行监听全选

$scope.list.forEach(function (value, index) {
    value.selectedStatus = true;
    value.name = "列表项";
    if (index ==  $scope.list.length - 1) {
        $timeout(function () {
            $scope.$watch("all", function (n, o) {
                if (n) {
                    $scope.list.forEach(function (value) {
                        value.selectedStatus = true;
                    });
                } else {
                    var midStatus = true;
                    $scope.list.forEach(function (value) {
                        midStatus = midStatus && value.selectedStatus;
                    });
                    if (midStatus) {
                        $scope.list.forEach(function (value) {
                            value.selectedStatus = false;
                        });
                    }
                }
            });
        }, 100)
    }
});

方法二：ng-change

<div style="width: 800px; margin: 200px auto 0;">
    <p>
        <label>
            <input type="checkbox" ng-model="all" ng-change="allSelect()">全选
        </label>
    </p>
    <label class="margin-right-20" ng-repeat="item in list">
        <input type="checkbox" ng-model="item.selectedStatus" ng-change="listItemSelect()">{{item.name}}{{$index}}
    </label>
</div>

$scope.allSelect = function () {
    if ($scope.all) {
        $scope.list.forEach(function (value) {
            value.selectedStatus = true;
        });
    } else {
        var midStatus = true;
        $scope.list.forEach(function (value) {
            midStatus = midStatus && value.selectedStatus;
        });
        if (midStatus) {
            $scope.list.forEach(function (value) {
                value.selectedStatus = false;
            });
        }
    }
};

$scope.listItemSelect = function () {
    var midStatus = true;
    $scope.list.forEach(function (value) {
        midStatus = midStatus && value.selectedStatus;
    });
    $scope.all = midStatus;
}

坑：由于是 ng-change 指令，在初始化过程中并不会触发函数，因此无法做到联动，在初始化时需要去调 $scope.listItemSelect() ;