增删改查

最新推荐文章于 2025-04-22 23:15:22 发布
原创最新推荐文章于 2025-04-22 23:15:22 发布 · 261 阅读
0 ·
CC 4.0 BY-SA版权
本文介绍了一个使用AngularJS实现的用户管理系统示例，包括用户信息的增删改查等功能，并实现了年龄和性别等条件的筛选，以及批量操作。
摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >
<!DOCTYPE html>
<html>

<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="angular.min.js"></script>-->
    <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/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
            }];
            //按照年龄查找
            $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.correct == true) {
                    $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.correct = 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>