angularjs表格表单增删改查

最新推荐文章于 2019-11-01 11:06:57 发布
Liuxb_zao
最新推荐文章于 2019-11-01 11:06:57 发布
阅读量328
点赞数
本文链接：https://blog.csdn.net/Liuxb_zao/article/details/78314921
版权
<!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>
Liuxb_zao
关注
0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
angularjs表格表单增删改查

html>html lang="en">head> meta charset="UTF-8"> title>Titletitle> script src="angular-1.3.0.js">script> script src="jquery.1.12.4.js">script> script> var app=angular.modu
复制链接

扫一扫