前端_全选、反选、批量删除、表格

来源：互联网发布：区域设置软件中文版编辑：程序博客网时间：2024/06/02 02:59
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>头部</title>    <style>        table {            border-collapse: collapse;        }        th, td {            padding: 10px;            border: 1px solid #000;        }    </style>    <script src="../angular-1.5.5/angular.min.js"></script>    <script>        var myapp = angular.module("myapp", []);        myapp.controller("myCtrl", function ($scope) {            $scope.data = [{                "name": "三星",                "price": "3000",                "has": true,                "check": false            }, {                "name": "huawei",                "price": "3000",                "has": true,                "check": false            }, {                "name": "苹果",                "price": "6000",                "has": true,                "check": false            }, {                "name": "小米",                "price": "2000",                "has": true,                "check": false            }];            //删除            $scope.del = function (index) {                console.log(index);                $scope.data.splice(index, 1);            };            //全选            $scope.checkAll = false;            $scope.check2 = function () {                if ($scope.checkAll == true) {                    for (var i = 0; i < $scope.data.length; i++) {                        $scope.data[i].check = true;                    }                } else {                    for (var i = 0; i < $scope.data.length; i++) {                        $scope.data[i].check = false;                    }                }            };            //反着全选            var n = 0;            $scope.count = function (index) {                //console.log(index);                if ($scope.data[index].check == true) {                    n++;                } else {                    n--                }                console.log(n);                if (n == $scope.data.length) {                    $scope.checkAll = true;                } else {                    $scope.checkAll = false;                }            };            //批量删除的方法            $scope.delAll = function () {                for (var i = 0; i < $scope.data.length; i++) {                    if ($scope.data[i].check == true) {                        $scope.data.splice(i, 1);                        i--;                    }                }            }        })    </script></head><body ng-app="myapp" ng-controller="myCtrl"><table>    <thead>    <tr>        <th>序号</th>        <th><input type="checkbox" ng-model="checkAll" ng-click="check2()">全选</th>        <th>品牌</th>        <th>价格</th>        <th>是否有货</th>        <th>操作            <button ng-click="delAll()">批量删除</button>        </th>    </tr>    </thead>    <tbody>    <tr ng-repeat="item in data">        <td>{{$index}}</td>        <td><input type="checkbox" ng-model="item.check" ng-click="count($index)"></td>        <td>{{item.name}}</td>        <td>{{item.price}}</td>        <td>{{item.has}}</td>        <td>            <button ng-click="del($index)">删除</button>        </td>    </tr>    </tbody></table></body></html>
阅读全文
0 0