前端_添加批量删除查找2

最新推荐文章于 2024-07-29 20:18:24 发布
哥哥儿
最新推荐文章于 2024-07-29 20:18:24 发布
阅读量452
点赞数
本文链接：https://blog.csdn.net/qq_39707849/article/details/78330119
版权
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            text-align: center;
        }

        table {
            border-collapse: collapse;
            margin: 20px auto;
        }

        th, td {
            padding: 10px;
            border: 1px solid #000;
        }
    </style>
    <script src="../package/angular-1.5.5/angular.min.js"></script>

<!--    <script src="../angular-1.5.5/angular.min.js"></script>-->








    <script>
        var myapp = angular.module("myapp", []);
        myapp.controller("myCtrl", function ($scope) {
            $scope.data = [{
                id: 1,
                name: "张三",
                pas: "123",
                age: "23",
                sex: "男",
                check: false
            }, {
                id: 2,
                name: "李四",
                pas: "345",
                age: "20",
                sex: "女",
                check: false
            }, {
                id: 3,
                name: "王五",
                pas: "23",
                age: "45",
                sex: "女",
                check: false
            }, {
                id: 4,
                name: "赵六",
                pas: "789",
                age: "45",
                sex: "女",
                check: false
            }, {
                id: 5,
                name: "赵四",
                pas: "7887",
                age: "23",
                sex: "男",
                check: false
            }];
            //按照年龄查找
            $scope.ageSize = "--请输选择--";
            $scope.ageFun = function (item) {
                //return false;
                if ($scope.ageSize != "--请输选择--") {
                    var arr = $scope.ageSize.split("-");
                    var min = arr[0];
                    var max = arr[1];
                    if (item.age > max || item.age < min) {
                        return false;
                    } else {
                        return true;
                    }
                } else {
                    return true;
                }
            };
            //按照性别查找
            $scope.sex = "--请输选择--";
            $scope.sexFun = function (item) {
                if ($scope.sex != "--请输选择--") {
                    if (item.sex == $scope.sex) {
                        return true;
                    } else {
                        return false;
                    }
                } else {
                    return true;
                }
            };
            //删除全部
            $scope.delAll = function () {
                $scope.data.length = 0;
            };
            //全选
            $scope.checkBtn = false;
            $scope.checkAll = function () {
                console.log($scope.checkBtn);
                if ($scope.checkBtn == 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.fx = function (index) {
                //console.log(index);
                if ($scope.data[index].check == true) {
                    n++;
                } else {
                    n--;
                }
                console.log(n);
                if (n == $scope.data.length) {
                    $scope.checkBtn = true;
                } else {
                    $scope.checkBtn = false;
                }
            };
            //批量删除
            $scope.del = function () {
                for (var i = 0; i < $scope.data.length; i++) {
                    if ($scope.data[i].check == true) {
                        $scope.data.splice(i, 1);
                        i--;
                    }
                }
            };
            //添加功能
            $scope.show = false;
            $scope.addUser = function () {
                $scope.show = true;
            }
            $scope.tj = function () {
                if ($scope.nameNext == "" || $scope.nameNext == null) {
                    alert("姓名")
                } else if ($scope.correct2 == true) {
                    /*$scope.data.push({
                        name:$scope.nameNext,
                        pas:$scope.pasNext,
                        age:$scope.ageNext,
                        sex:$scope.sexNext,
                        check:false
                    })*/
                    console.log("修改");
                    $scope.data[$scope.index].pas = $scope.pasNext;
                } else {
                    $scope.data.push({
                        name: $scope.nameNext,
                        pas: $scope.pasNext,
                        age: $scope.ageNext,
                        sex: $scope.sexNext,
                        check: false
                    })
                }
                $scope.show = false;
            };
            $scope.correct = function (index) {
                console.log(index);
                $scope.show = true;
                $scope.nameNext = $scope.data[index].name;
                $scope.pasNext = $scope.data[index].pas;
                $scope.correct2 = true;
                //记录索引
                $scope.index = index;
            }
        })
    </script>

</head>
<body ng-app="myapp" ng-controller="myCtrl">
<span>姓名查找</span>
<input type="text" placeholder="请输入姓名" ng-model="search">
<span>年龄查找</span>
<select ng-model="ageSize">
    <option>--请输选择--</option>
    <option>10-20</option>
    <option>20-30</option>
    <option>30-40</option>
    <option>40-50</option>
</select>
<span>性别查找</span>
<select ng-model="sex">
    <option>--请输选择--</option>
    <option>男</option>
    <option>女</option>
</select>
<button ng-click="delAll()">删除全部</button>
<button ng-click="del()">批量删除</button>
<table>
    <thead>
    <tr>
        <th>全选<input type="checkbox" ng-model="checkBtn" ng-click="checkAll()"></th>
        <th>序号</th>
        <th>姓名</th>
        <th>密码</th>
        <th>年龄</th>
        <th>性别</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <tr ng-repeat="item in data|filter:{name:search}|filter:ageFun|filter:sexFun">
        <td><input type="checkbox" ng-model="item.check" ng-click="fx($index)"></td>
        <td>{{$index}}</td>
        <td>{{item.name}}</td>
        <td>{{item.pas}}</td>
        <td>{{item.age}}</td>
        <td>{{item.sex}}</td>
        <td>
            <button ng-click="correct($index)">修改密码</button>
        </td>
    </tr>
    </tbody>
</table>
<button ng-click="addUser()">添加用户</button>
<table ng-show="show">
    <tbody>
    <tr>
        <td>姓名</td>
        <td><input type="text" ng-model="nameNext" placeholder="请输入姓名"></td>
    </tr>
    <tr>
        <td>密码</td>
        <td><input type="text" ng-model="pasNext" placeholder="请输入密码"></td>
    </tr>
    <tr>
        <td>年龄</td>
        <td><input type="number" ng-model="ageNext" placeholder="请输入年龄"></td>
    </tr>
    <tr>
        <td>性别</td>
        <td><input type="text" ng-model="sexNext" placeholder="请输入性别"></td>
    </tr>
    <tr>
        <td colspan="2">
            <button ng-click="tj()">提交</button>
        </td>
    </tr>
    <!--<tr>
        <td>密码确认</td>
        <td><input type="text" ng-model="pasNext2"></td>
    </tr>-->

    </tbody>
</table>
</body>
</html>