angular表格添加+查找+修改

最新推荐文章于 2020-12-29 12:24:34 发布
yu_10_9
最新推荐文章于 2020-12-29 12:24:34 发布
阅读量716
点赞数
本文链接：https://blog.csdn.net/yu_10_9/article/details/78312383
版权
<!DOCTYPE html>
<html ng-app="nbApp">
<head lang="en">
    <meta charset="UTF-8">
    <script type="text/javascript" src="angular-1.3.0.js"></script>
    <script type="text/javascript" src="jquery.1.12.4.js"></script>
    <title></title>
    <script type="text/javascript">
        var app = angular.module("nbApp", []);
        app.controller("UsersCtrl" , function($scope){
            $scope.data = [
                {
                    id: 1,
                    name: "张三",
                    password: "123",
                    age: 20,
                    sex: "男"
                },
                {
                    id: 2,
                    name: "李四",
                    password: "123",
                    age: 21,
                    sex: "男"
                },
                {
                    id: 3,
                    name: "王五",
                    password: "123",
                    age: 22,
                    sex: "男"
                },
                {
                    id: 4,
                    name: "赵六",
                    password: "123",
                    age: 23,
                    sex: "男"
                }
            ];
            var id = 1;
            $scope.add = function () {
                $scope.data.push({
                    id: id++,
                    name: $scope.name,
                    password: $scope.password,
                    age: $scope.age,
                    sex: $scope.sex,
                });

                $scope.name = "";
                $scope.password = "";
                $scope.age = "";
                $scope.sex = "";
                $scope.addUserIsShow = false;
            };

            $scope.addUser = function () {
                $scope.addUserIsShow = true;
            };

            $scope.editUser = function (index) {
                var user = $scope.data[index];
                $scope.e_name = user.name;
                $scope.e_old_password = "";
                $scope.e_password = "";
                $scope.e_repassword = "";
                $scope.editUserIsShow = true;
                $scope.index = index;
            };

            $scope.edit = function () {
                if ($scope.e_password != $scope.e_repassword) {
                    alert("两次密码不一致！");
                    return;
                }

                $scope.data[$scope.index].password = $scope.e_password;
                $scope.addUserIsShow = false;
                $scope.editUserIsShow = false;
            };
            var old_data = $scope.data;
            $scope.searchByName = function () {
                $scope.data = [];
                for (var i in old_data) {
                    if (old_data[i].name == $scope.s_name) {
                        $scope.data.push(old_data[i]);
                    }
                }
            };

        });
        $(function () {
            $("input[name='check_all']").click(function () {
                var chked = this.checked;

                $("input[name='users']").each(function () {
                    this.checked = chked;
                });
            });
        });


    </script>
    <style type="text/css">
        .user h1{
            text-align: center;
        }
        .user .userc{
            text-align: center;
        }
        .user .userc .xia{
            width: 110px;
            height: 24px;
        }
        .user .userc .sex{
            width: 40px;
            height: 24px;
        }
        .user .userc .quan{
            width: 80px;
            height: 24px;
        }
        .user .userc .pi{
            width: 80px;
            height: 24px;
        }
        .userb {
            margin-top: 30px;
            width: 100%;
            height: 200px;

        }
        .userb .b{
            text-align: center;
            margin: auto;
            width: 700px;
            height: 30px;
        }
        .usert{
            text-align: center;
        }
        .usert button{
            margin-top: 40px;
            width: 120px;
            height: 40px;
            margin-bottom: 20px;
        }
        .userbt .bt{
            text-align: center;
            margin: auto;
        }
        .userbg{
            margin-top: 20px;
        }
        .userbg .bg{
            text-align: center;
            margin: auto;
        }
    </style>
</head>
<body ng-controller="UsersCtrl">
    <div class="user">
        <h1>用户信息表</h1>
        <div class="userc">
            <input placeholder="用户名查询" ng-model="s_name" ng-change="searchByName()">年龄:
            <select class="xia">
                <option>--请选择--</option>
                <option>北京</option>
                <option>天津</option>
                <option>上海</option>
                <option>杭州</option>
            </select>
            性别:
            <select class="sex">
                <option>男</option>
                <option>女</option>
            </select>
            <button class="quan">全部删除</button>
            <button class="pi">批量删除</button>
        </div>
    </div>
    <div class="userb" >
        <table border="1" cellpadding="10" cellspacing="0" class="b">
            <tr>
                <td><input type="checkbox" name="check_all"></td>
                <td>id</td>
                <td>用户名</td>
                <td>密码</td>
                <td>年龄</td>
                <td>性别</td>
                <td>操作</td>
            </tr>
            <tr  ng-repeat="user in data">
                <td><input type="checkbox" name="users"></td>
                <td>{{user.id}}</td>
                <td>{{user.name}}</td>
                <td>{{user.password}}</td>
                <td>{{user.age}}</td>
                <td>{{user.sex}}</td>
                <td><button  ng-click="editUser($index)">修改密码</button></td>
            </tr>

        </table>
    </div>
    <div class="usert">
        <button ng-click="addUser()">添加用户</button>
    </div>
    <div class="userbt" ng-show="addUserIsShow">
        <table border="1" cellpadding="10" cellspacing="0" class="bt">
            <tr>
                <td>用户名:</td>
                <td><input placeholder="请输入用户名" ng-model="name"></td>
            </tr>
            <tr>
                <td>密码:</td>
                <td><input placeholder="请输入密码" ng-model="password"></td>
            </tr>
            <tr>
                <td>年龄:</td>
                <td><input placeholder="请输入年龄"ng-model="age"></td>
            </tr>
            <tr>
                <td>性别:</td>
                <td><input  placeholder="请输入性别" ng-model="sex"></td>
            </tr>
            <tr>
                <td  colspan="2"><button ng-click="add()">提交</button></td>
            </tr>
        </table>
    </div>
    <div class="userbg" ng-show="editUserIsShow">
        <table  border="1" cellpadding="10" cellspacing="0" class="bg">
            <tr>
                <td>
                    用户名：
                </td>
                <td>
                    <input type="text" ng-model="e_name" disabled/>
                </td>
            </tr>
            <tr>
                <td>
                    旧密码：
                </td>
                <td>
                    <input type="text" ng-model="e_old_password"/>
                </td>
            </tr>
            <tr>
                <td>
                    新密码：
                </td>
                <td>
                    <input type="text" ng-model="e_password"/>
                </td>
            </tr>
            <tr>
                <td>
                    确认密码：
                </td>
                <td>
                    <input type="text" ng-model="e_repassword"/>
                </td>
            </tr>
            <tr>
                <td colspan="2" align="center">
                    <input type="hidden" ng-model="index"/>
                    <button ng-click="edit()">提交</button>
                </td>
            </tr>
        </table>
    </div>
</body>
</html>