最近在学习angularJS,相比于jQuery,angularJS双向数据绑定的功能真的很方便,很强大。但是在实现checkbox全选全不选的时候,好像没有找到可以直接用的方法。于是决定自己写一个。
jQuery的实现思路:操作dom结构树,找到需要全选的所有子复选框;
angularJS的思路:通过数据的双向绑定实现。
1、JS代码:
//单个购物车全选;全不选 $scope.selectCart=function ($event,sellerId) { var flag=$event.target.checked;//主checkbox的选中状态 var j=$scope.findIndex(sellerId); var list=$scope.CartList[j];//找到第几个购物车 //全选or全不选 list.cartIsJia=flag; for(var i=0;i<list.orderItemList.length;i++){ list.orderItemList[i].isJia=flag;//遍历数组并赋值,保持每件商品的checkbox的状态与主checkbox的选中状态相同。 } //重新计算总价钱 $scope.Sum=$scope.getSum($scope.CartList); };
2、html代码:
<!--主checkbox--> <input type="checkbox" name="" value="" ng-checked="selectCartStatus" ng-model="cart.cartIsJia" ng-click="selectCart($event,cart.sellerId);"/>
<!--子复选框--> <input type="checkbox" ng-click="updateSelection($event,$index,cart.sellerId);" name="box" value="" ng-checked="orderItem.isJia" ng-model="orderItem.isJia"/>
3、ng-checked与ng-model修饰checkbox时的效果:
(1)如果初始状态ng-checked和ng-model指令同时存在,则复选框的初始状态是否被选中有ng-checked的值来决定。当我们改变ng-model的值时,选中状态会随着ng-model的值而改变。
(2)当只有ng-model指令存在时,则复选框初始状态(是否被选中)由ng-model的值来决定,且它绑定的变量的值为随复选框是否被选中而变化(选中为true,未选中为false)
(3)当只有ng-checked指令存在时,则复选框初始状态(是否被选中)由ng-checked的值来决定,但是它绑定的变量的值是不会随复选框选中状态的改变而改变的,是固定值。
菜鸟一枚,写得不好,多多指教!