angularJs 表格添加删除修改查询

来源：互联网发布：融资租赁渠道知乎编辑：程序博客网时间：2024/05/16 05:33
<!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;}
阅读全文
0 0