angularJs 表格添加删除修改查询

最新推荐文章于 2021-06-04 16:45:58 发布

余生I

最新推荐文章于 2021-06-04 16:45:58 发布

阅读量3.5k

点赞数

分类专栏： angularJS

本文链接：https://blog.csdn.net/qq_39357892/article/details/78082435

版权

angularJS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="agl/angular.min.js"></script>
    <script>
        var app=angular.module("mpp",[]);
        app.controller("ctrl",function ($scope) {
            $scope.arr=[];
            $scope.add=function () {
                $scope.arr.push({name:$scope.name,password:$scope.password,age:$scope.age,sex:$scope.sex})
            }
            $scope.submit=function () {
                for (var i=0;i<$scope.arr.length;i++)
                {
                    if($scope.arr[i].name==$scope.name2)
                    {
                    if($scope.arr[i].password==$scope.pass)
                    {
                        if($scope.pass2==$scope.pass){
                            $scope.arr[i].password=$scope.pass2;
                        }else{
                            alert("两次输入不一致");
                        }
                    }else {
                        alert("密码错误");
                    }
                    }else {
                        alert("用户名错误");
                    }
                }
            }
            $scope.flag=false;
            $scope.show=function () {
                $scope.flag=true;
            }
        })
    </script>
    <link rel="stylesheet" href="css/style.css">
</head>
<body ng-app="mpp" ng-controller="ctrl">
<div class="inner">
    <input type="text" placeholder="用户名查询" ng-model="user">
    <input type="text" placeholder="年龄范围查询" ng-model="ages">
    <select ng-model="sexs">
        <option value="男">男</option>
        <option value="女">女</option></select>
    <button>全部删除</button>
    <TABLE>
        <tr>
            <th>Id</th>
            <th>用户名</th>
            <th>密码</th>
            <th>年龄</th>
            <th>性别</th>
            <th>操作</th>
        </tr>
        <tr ng-repeat="item in arr|filter:{name:user}|filter:{age:ages}|filter:{sex:sexs}">
            <td>{{$index+1}}</td>
            <td>{{item.name}}</td>
            <td>{{item.password}}</td>
            <td>{{item.age}}</td>
            <td>{{item.sex}}</td>
            <td><button ng-click="show()">修改密码</button></td>
        </tr>

    </TABLE>
    <button ng-click="add()">添加用户</button>
    <div class="conner">
    <div class="add">
        用户名：<input type="text" ng-model="name"><br>
        密 码：<input type="password" ng-model="password"><br>
        年 龄：<input type="text" ng-model="age"><br>
        性 别：<select ng-model="sex">
        <option value="男">男</option>
        <option value="女">女</option></select><br>
    </div>
    <div class="update" ng-show="flag">
        用户名：<input type="text" ng-model="name2"><br>
        旧密码：<input type="text" ng-model="pass"><br>
        新密码：<input type="password" ng-model="pass2"><br>
        确认密码：<input type="password" ng-model="pass3"><br>
    </div>
    </div>
    <button ng-click="submit()">提交</button>
</div>
</body>
</html>

css
*{
    margin: 0;
    padding: 0;
}
.inner{
    margin: 20px auto;
    text-align: center;
}
table{
    margin: 10px auto;
    text-align: center;
}
tr{
    border-collapse: collapse;
}
tr th,td{
    border:1px solid #000000;
    width: 60px;
}
.conner{
    width: 600px;
    height: 300px;
    background: #ffe7e0;
    margin: 0 auto;
}
.add{
    margin: 10px auto;
    padding-top: 20px;
    width: 260px;
    height: 120px;
    border: 2px solid #e42112;
}
.update{
    width: 280px;
    height: 120px;
    border: 2px solid #e42112;
    text-align: center;
    margin: 10px auto;
    padding-top: 20px;
}

余生I

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
angularJs 表格添加删除修改查询

html>html lang="en">head> meta charset="UTF-8"> title>Titletitle> script src="agl/angular.min.js">script> script> var app=angular.module("mpp",[]); app.controller("ct
复制链接

扫一扫

专栏目录