最近需要写一个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)