angular 对checkbox选择框的操作实例

//初始数据格式
$scope.pigdatalists = [
{"id":1,"checked":false},{"id":2,"checked":false},
{"id":3,"checked":false}
];

//全选
                        scope.checkearall = false;//默认不是全选状态
                        scope.checkearAll = function(checked){
//改变全选按钮的状态
                            scope.checkearall = !scope.checkearall;
//循环操作数据,将每条数据里面的checked值跟全选状态的值对应起来
                            angular.forEach(scope.pigdatalists,function(value,key){
                                value.checked = scope.checkearall;
                            });
                        };
                        //单选
                        scope.checkearItemFun = function(checked,index){
                            scope.pigdatalists[index].checked = checked;
                        }


 

<ul  class="">
                <li class="col-xs-12">
                    <div class="col-xs-3 aligncenter" >
                        <input type="checkbox" class="pigdatavalitemcheck" name="checkpig" id="checkallpigdata" ng-model="checkearall" ng-click="checkearAll(checkearall)" /><label for="checkallpigdata"> 全选</label>
                    </div>
                    <span class="pigdatavalitem col-xs-3">耳号</span>
                    <span class="pigdatavalitemblock col-xs-3" >栋舍</span>
                    <span class="pigdatavalitemfield col-xs-3" >栏位</span>
                </li>
                <li ng-repeat="item in pigdatalists"  class="col-xs-12" ng-class="{'activedbackgroundcolor2':item.checked}">
                    <div class="col-xs-3 aligncenter">
                        <input type="checkbox" class="pigdatavalitemcheck" name="checkpig" ng-model="item.checked" ng-click="checkearItemFun(item.checked,$index)" />
                    </div>
                    <span class="pigdatavalitem  col-xs-3" ng-bind="item.price"></span>
                    <span class="pigdatavalitemblock  col-xs-3" ng-bind="item.name"></span>
                    <span class="pigdatavalitemfield  col-xs-3" ng-bind="item.name"></span>
                </li>
            </ul>


  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值