angular表格添加+查找+修改

来源：互联网发布：上传淘宝的照片不清晰编辑：程序博客网时间：2024/06/09 04:57
<!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>
阅读全文
0 0