angularjs表格表单增删改查

来源：互联网发布：unity3d角色动画模型编辑：程序博客网时间：2024/05/22 15:30
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script src="angular-1.3.0.js"></script>    <script src="jquery.1.12.4.js"></script>    <script>        var app=angular.module("myApp",[]);        var data=[            {                done:false,                id:"1",                name:"张三",                password:123,                age:22,                sex:"男"            },            {                done:false,                id:2,                name:"李四",                password:456,                age:33,                sex:"女"            },            {                done:false,                id:3,                name:"王五",                password:789,                age:44,                sex:"男"            }            ]         /*全选*/        app.controller("myCtrl",function ($scope) {            $scope.data=data;            $scope.col="id";            $scope.desc=0;            $scope.checkAll=function () {                for(var i=0;i<$scope.data.length;i++)                {                    if($scope.chec==true)                    {                        $scope.data[i].done=true;                    }                    else{                        $scope.data[i].done=false;                    }                }            }            /*===============添加用户====================*/            var id = 4;            $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 data = $scope.data[index];                $scope.u_name = data.name;                $scope.u_oldpassword = "";                $scope.u_password2 = "";                $scope.u_ok = "";                $scope.editUserIsShow = true;                $scope.index = index;            };            $scope.edit = function () {                if ($scope.u_password2 != $scope.u_ok) {                    alert("两次密码不一致！");                    return;                }                $scope.data[$scope.index].password = $scope.u_password2;                $scope.editUserIsShow = false;            };            /*删除选中的*/            $scope.delall=function () {                var con=confirm("确定删除么?");                if(con==true){                    for(var i=0;i<$scope.data.length;i++)                    {                        if($scope.data[i].done==true)                        {                            $scope.data.splice(i,1);                            i--;                        }                    }                }else{                }            }            //全部删除            $scope.alld=function () {                var con=confirm("确定全部删除么?");                $scope.data=[];            }        });    </script></head><body ng-app="myApp" ng-controller="myCtrl">    <div>        <div style="margin-left: 650px"><h2>用户信息表</h2></div>        <div style="margin-left: 450px">            <input type="text"placeholder="用户名查询" ng-model="search">            年龄:<select ng-model="search2"><option>---请选择---</option><option>22</option><option>33</option><option>44</option></select>            性别:<select ng-model="search3"><option>男</option><option>女</option><option>人妖</option></select>            <button  style="color: #c3c3c3;background-color: red"ng-click="alld()">全部删除</button>            <button style="color: #E8FBFF;background-color: yellow"ng-click="delall()">批量删除</button>        </div>        <p></p>        <div style="margin-left: 200px">            <table border="1" bordercolor="#c3c3c3" width="500" cellpadding="0" cellspacing="0" style="width:1000px;text-align: center">                <thead>                <tr>                    <td ><input type="checkbox"ng-click="checkAll()" ng-model="chec"></td>                    <td >id</td>                    <td >用户名</td>                    <td >密码</td>                    <td >年龄</td>                    <td >性别</td>                    <td >操作</td>                </tr>                </thead>                <tr ng-repeat="item in data|filter:{'name':search}|filter:{'age':search2}|filter:{'sex':search3}">                    <td><input type="checkbox" ng-model="item.done"></td>                    <td>{{item.id}}</td>                    <td>{{item.name}}</td>                    <td>{{item.password}}</td>                    <td>{{item.age}}</td>                    <td>{{item.sex}}</td>                    <td>                        <button style="color:#0a9dc7;background-color: yellow" ng-click="editUser($index)">修改密码</button>                    </td>                </tr>            </table>            <p></p>            <button style="color:#000000;background-color:#4b8bf4; width: 110px;height: 30px;margin-left: 400px"ng-click="addUser()">添加用户</button>            <p></p>            <div style="margin-left: 300px"ng-show="addUserIsShow">                <table border="1" bordercolor="#c3c3c3" width="300px" style="width:350px";>                    <tr>                        <td>用户名:</td>                        <td><input type="text" placeholder="请输入用户名" ng-model="name"></td>                    </tr>                    <tr>                        <td>密码:</td>                        <td><input type="text"placeholder="请输入密码" ng-model="password"></td>                    </tr>                    <tr>                        <td>年龄:</td>                        <td><input type="text"placeholder="请输入年龄" ng-model="age"></td>                    </tr>                    <tr>                        <td>性别:</td>                        <td><input type="text"placeholder="请输入性别"ng-model="sex" ></td>                    </tr>                    <tr>                        <td colspan="2" align="center"> <button type="submit" ng-click="add()">提交</button></td>                    </tr>                </table>            </div>            <p></p>            <div style="margin-left: 300px"ng-show="editUserIsShow">                <table border="1" bordercolor="#c3c3c3" width="300px" style="width:350px";>                    <tr>                        <td>用户名:</td>                        <td><input type="text" ng-model="u_name"  disabled></td>                    </tr>                    <tr>                        <td>旧密码:</td>                        <td><input type="text"placeholder="请输入旧密码"ng-model="u_oldpassword" ></td>                    </tr>                    <tr>                        <td>新密码:</td>                        <td><input type="text"placeholder="请输入新密码"ng-model="u_password2" ></td>                    </tr>                    <tr>                        <td>确认:</td>                        <td><input type="text" ng-model="u_ok" ></td>                    </tr>                </table>                <button type="hidden" style="margin-left: 100px;"ng-click="edit()">提交</button>            </div>        </div>    </div></body></html>
阅读全文
0 0