angularJs 用户添加

来源：互联网发布：笔记本硬盘坏了数据编辑：程序博客网时间：2024/05/18 02:15
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script src="../angular-1.5.5/angular.js"></script>    <style>        .box1{            width: 700px;            text-align: center;        }        .box2{            text-align: center;            margin-left: 150px;        }        .box3{            text-align: center;            margin-left: 150px;        }        .btn {            color: white;            background-color: #008aa6;            padding: 0px 1em;            height: 36px;            margin-top: 20px;            margin-left: 10px;            border: 0px solid black;            border-radius: 5px;            margin-right: 270px;        }    </style>    <script>        var myapp=angular.module("myapp",[]);        myapp.controller("myCtrl",function ($scope) {            $scope.data=[{                name:"张三",                pwd:123,                age:22,                sex:"男"            },{                name:"李四",                pwd:456,                age:33,                sex:"女"            },{                name:"王五",                pwd:789,                age:44,                sex:"男"            }];            $scope.ages="--请选择--";            $scope.sexs="--请选择--";            $scope.agefilter=function (item) {                if($scope.ages!="--请选择--"){                    var arr=$scope.ages.split("-");                    var min=arr[0];                    var max=arr[1];                    if(min<=item.age&&item.age<max){                        return true;                    }else{                        return false;                    }                }else{                    return true;                }            }            $scope.sexfilter=function (item) {                            }        });    </script></head><body ng-app="myapp" ng-controller="myCtrl"><div>    <h2 align="center">用户信息表</h2></div><div class="box1">    <input type="text" ng-model="search" size="10" placeholder="用户名查询">    年龄:<select ng-model="ages">            <option>--请选择--</option>            <option>20-30</option>            <option>30-40</option>            <option>40-50</option>        </select>    性别:<select ng-model="sexs">            <option>男</option>            <option>女</option>        </select>    <input type="button" value="全部删除" ng-click="delAll()">    <input type="button" value="批量删除" ng-click="delSelect()"></div><br><div class="box2">    <table border="2" bordercolor="black" width="400" cellspacing="0" cellpadding="5">        <thead>            <tr>                <th>序号</th>                <th>id</th>                <th>用户名</th>                <th>密码</th>                <th>年龄</th>                <th>性别</th>                <th>操作</th>            </tr>        </thead>        <tbody>            <tr ng-repeat="item in data|filter:{'name':search}|filter:agefilter|filter:sexfilter">                <td><input type="checkbox"></td>                <td>{{$index}}</td>                <td>{{item.name}}</td>                <td>{{item.pwd}}</td>                <td>{{item.age}}</td>                <td>{{item.sex}}</td>                <td><button ng-click="updatePwd">修改密码</button></td>            </tr>        </tbody>    </table></div><div class="box3">    <button class="btn" ng-click="addUser()">添加用户</button></div></body></html>
阅读全文
0 0