Angular Js 里面table, checkbox制作可多选，单选的表格

最新推荐文章于 2022-02-18 18:08:16 发布

qq_34241677

最新推荐文章于 2022-02-18 18:08:16 发布

阅读量4.1k

点赞数

分类专栏： angular-js 文章标签： angularjs checkbox

本文链接：https://blog.youkuaiyun.com/qq_34241677/article/details/78674919

版权

angular-js 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何在AngularJS中利用table和checkbox实现可展开的子表，支持多选和单选功能。通过绑定ng-model到布尔值属性来控制复选框的状态，并展示了一个包含html和js代码的示例。

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

Angular Js 里面table, checkbox制作可多选，单选的表格

查看别人的方法再加拓展，忘记了原博客地址；
主要实现主表格里面可以展开子表，子表的信息可以多选也可以单选，并绑定数据，算是三级选中吧？；
复选框只有两个值：true或者false，因此在AngularJS中，一般都是将复选框的ng-model绑定为一个布尔值属性，通过这两个布尔值来决定其勾选状态，以及通过其勾选状态来设置被绑定的属性值为true或false。我们来看以下示例：

图片预览：

这里写图片描述

html:

<div>
      <input  type="checkbox" ng-model="select_allList" ng-change="selectAll()"> 全部选中<br><br>
          <table class="table table-hover table-responsive workSheet-form">
                            <thead>
                            <tr>
                                <th>选择</th>
                                <th>大单位</th>
                                <th>小单位</th>
                            </tr>
                            </thead>
                            <tbody ng-repeat="item in customerList">
                            <tr>
                                <td>
                                    <label for="flag">全选此单位
                                        <input id="flag" type="checkbox" ng-model="item.select_all" ng-change="selectItem(item)">
                                    </label>
                                     展开子表    <input type="checkbox" ng-model="myVar">
                                </td>
                                <td>{{item.deliverAdress}}</td>
                                <td>{{item.workUunitName}}</td>
                            </tr>
                            <tr ng-show="myVar">
                                <td colspan="3">
                                    <table>
                                    <thead>
                                    <tr>
                                        <th>选择</th>
                                        <th>姓名</th>
                                        <th>品名</th>
                                        <th>数量</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr ng-repeat="x in item.listBoxProduct">
                                        <td>
                                            <input type="checkbox" ng-model="x.checked" ng-change="selectOne(x,item)">
                                        </td>
                                        <td>{{x.name}}</td>
                                        <td>{{x.infoName}}</td>
                                        <td>{{x.quantity}}</td>
                                    </tr>
                                    </tbody>
                                </table></td>
                            </tr>
                            </tbody>
                        </table>
                    </div>

js代码：

 $scope.m = [];
            $scope.checked = [];
            $scope.selectAll = function () {
                if($scope.select_allList) {
                     $scope.checked = [];
                    angular.forEach($scope.customerList, function (item) {
                        console.log("true:"+item.select_all );
                        item.select_all = true;
                        angular.forEach(item.listBoxProduct, function (i) {
                            i.checked = true;
                            $scope.checked.push(i);
                        })
                    })
                }else {
                    angular.forEach($scope.customerList, function (item) {
                        item.select_all = false;
                         $scope.checked = [];
                        angular.forEach(item.listBoxProduct, function (i) {
                            i.checked = false;
                        })
                    })
                }
                console.log("$scope.checked"+JSON.stringify($scope.checked));
            };

            $scope.selectItem = function (item) {
                console.log("$scope.select_all"+item.select_all);
                if(item.select_all) {
                   // $scope.checked = [];
                    angular.forEach(item.listBoxProduct, function (i) {
                        console.log("true:"+item.select_all );
                        i.checked = true;
                        $scope.checked.push(i);
                    })
                }else {
                    angular.forEach(item.listBoxProduct, function (i) {
                        console.log("false:"+item.select_all );
                        i.checked = false;
                       // $scope.checked = [];
                        var index = $scope.checked.indexOf(i);
                        $scope.checked.splice(index, 1);
                    })
                }
                console.log("$scope.checked"+JSON.stringify($scope.checked));
            };
            $scope.selectOne = function (x,item) {
                  var index = $scope.checked.indexOf(x);
                console.log("index"+index);
                    if(x.checked && index === -1) {

                        $scope.checked.push(x);
                    } else if (!x.checked && index !== -1){
                        $scope.checked.splice(index, 1);
                    };
                 //后续添加当子表全选时主表相应记录的checkBox 选中
                console.log(JSON.stringify($scope.checked));
            };

选中的数据：

这里写图片描述