全选全不选,angularJS如何实现?

最近在学习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的值来决定,但是它绑定的变量的值是不会随复选框选中状态的改变而改变的,是固定值。

菜鸟一枚,写得不好,多多指教!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值