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

来源：互联网发布：mac免费游戏推荐编辑：程序博客网时间：2024/06/05 07:26
<!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>
阅读全文
0 0