angular 对checkbox选择框的操作实例

最新推荐文章于 2025-06-19 14:35:59 发布

元生态

最新推荐文章于 2025-06-19 14:35:59 发布

阅读量2.1w

点赞数

CC 4.0 BY-SA版权

分类专栏： angularjs

本文链接：https://blog.youkuaiyun.com/chenhua4088/article/details/51445453

angularjs 专栏收录该内容

9 篇文章

订阅专栏

本文详细介绍了如何使用Angular实现数据列表中的全选与单选功能，包括按钮状态切换、数据项选择状态同步及操作逻辑实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//初始数据格式
$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>