最近需要写一个CheckBox，要用angular实现，目标是把所有选中的id传个后台。
期间参考了几篇文章，博主写的都很好

angularjs实现 checkbox全选、反选的思考
AngularJs 中的CheckBox前后台交互
angular 对checkbox选择框的操作实例

我的代码
C层

    // 定义存储菜单id的数组$scope.selected = [];$scope.checkMenu = function (checked, id) {//判断 checked状态id存储 再次点击删除var index = $scope.selected.indexOf(id);if (checked && index === -1) {$scope.selected.push(id);}if(!checked && index !== -1){$scope.selected.splice(index, id);}};

V层

    <input type="checkbox" ng-model="menus.checked" ng-change="checkMenu(menus.checked, menus.id)" /><label class="col-xs-10">{{menus.name}}<div ng-repeat="menu in menus._child"><input type="checkbox" ng-model="menu.checked" ng-change="checkMenu(menu.checked, menu.id)" /><label class="col-xs-10">{{menu.name}}</label></div></label>

因为是二维数组，所以有个第二个ng-repeat，看起来比较乱，其实道理都一样
实现全选和反选功能

/** 如果传入checked为true，则子菜单全部置为TRUE* 否则，子菜单全部置FALSE* 判断是否有一个子菜单checked为FALSE，如果有，则父菜单置FALSE* 将选中的菜单id存入数组* */// 定义存储菜单id的数组$scope.selected = [];//判断是否有子菜单，如果有则在选择父菜单的时候全选子菜单$scope.checkMenus = function (checked, id, menus) {//判断父菜单 checked状态id存储 再次点击删除var index = $scope.selected.indexOf(id);if (checked && index === -1) {$scope.selected.push(id);}if (!checked && index !== -1) {$scope.selected.splice(index, id);}if (checked) {if (menus) {angular.forEach(menus, function (menu) {// 将子选项全部置true并将子id都存入数组menu.checked = true;$scope.selected.push(menu.id);});}} else {angular.forEach(menus, function (menu) {//子菜单全部置FALSE并清空selected数组menu.checked = false;$scope.selected.splice(menu.id);});}};

在CheckBox中，通常会有两种属性，ng-model 和 ng-checked，例如以下

<input type="checkbox" ng-checked="m" ng-model="n">

注意：
1. m的初值为true，则为选中状态，FALSE则未选中，与n无关
2. 当单击复选框，n的值随之发生变化，与m无关，即ng-model中才是双向数据绑定的值
3. 如果初始状态ng-checked和ng-model指令同时存在，则复选框的初始状态是否被选中有ng-checked的值来决定，与ng-model无关。
4. 当只有ng-model指令存在时，则复选框初始状态（是否被选中）由ng-model的值来决定，且它绑定的变量的值为随复选框是否被选中而变化（选中为true，未选中为false）