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

来源：互联网发布：淘宝9.9的鼠标垫编辑：程序博客网时间：2024/05/16 08:45

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));            };

选中的数据：

这里写图片描述

阅读全文

0 0