姓名查询年龄排序添加用户删除

来源：互联网发布：android wear源码下载编辑：程序博客网时间：2024/04/29 13:05

<!DOCTYPE html>
<html>

   <head>
       <meta charset="UTF-8">
       <title></title>
       <style type="text/css">
           table {
               margin-top: 20px;
           }

           table tr:nth-child(even) {
               background: #eeeeee;
           }

           table tr:hover {
               background: #41C7DB;
           }

           #button {
               margin-top: 20px;
           }
       </style>
       <script type="text/javascript" src="js/angular.js"></script>
       <script type="text/javascript">
           var app = angular.module("myapp", []);
           app.controller("myctrl", function($scope) {
               $scope.users = [{
                   "name": "张三",
                   "age": 45,
                   "pinyin": "zhang san",
                   "position": "总经理",
                   "operation": "删除"
               }, {
                   "name": "李四",
                   "age": 43,
                   "pinyin": "li si",
                   "position": "设计师",
                   "operation": "删除"
               }, {
                   "name": "王五",
                   "age": 40,
                   "pinyin": "wang wu",
                   "position": "工程师",
                   "operation": "删除"
               }, {
                   "name": "赵六",
                   "age": 33,
                   "pinyin": "zhao liu",
                   "position": "工程师",
                   "operation": "删除"
               }, {
                   "name": "周七",
                   "age": 32,
                   "pinyin": "zhou qi",
                   "position": "人事经理",
                   "operation": "删除"
               }];
               $scope.cha = function() {
                   var flag = false;
                   $scope.a = "";
                   reg = /法轮功/g;
                   for(index in $scope.users) {
                       if($scope.chaname == $scope.users[index].name) {
                           flag = true;
                       }
                   }
                   if($scope.chaname == "" || $scope.chaname == null) {
                       alert("请输入姓名");
                   } else if(flag) {
                       alert("搜到");
                       $scope.a = $scope.chaname;
                   } else if(reg.test($scope.chaname)) {
                       alert("敏感字");
                   } else {
                       alert("搜不到");
                       $scope.a = null;
                   }
               };
               $scope.tianjia = false;
               $scope.add = function() {
                   $scope.tianjia = true;
               };
               $scope.newname = "";
               $scope.newage = "";
               $scope.newpinyin = "";
               $scope.newposition = "";
               var flag1 = flag2 = flag3 = flag4 = false;

               $scope.bao = function() {
                   reg = /[0-9]/;
                   if($scope.newname == "" || $scope.newname == null) {
                       alert("姓名不能为空");
                       flag1 = false;
                   } else {
                       flag1 = true;
                   }

                   if($scope.newage == "" || $scope.newage == null) {
                       alert("年龄不能为空");
                       flag2 = false;
                   }
                   if(!reg.test($scope.newage)) {
                       alert("年龄格式错误");
                       flag2 = false;
                   } else {
                       flag2 = true;
                   }

                   if($scope.newpinyin == "" || $scope.newpinyin == null) {
                       alert("拼音不能为空");
                       flag3 = false;
                   } else {
                       flag3 = true;
                   }

                   if($scope.newposition == "" || $scope.newposition == null) {
                       alert("职位不能为空");
                       flag4 = false;
                   } else {
                       flag4 = true;
                   }

                   if(flag1 && flag2 && flag3 && flag4) {
                       var newuser = {
                           "name": $scope.newname,
                           "age": parseInt($scope.newage),
                           "pinyin": $scope.newpinyin,
                           "position": $scope.newposition,
                       }
                       $scope.users.push(newuser);
                   }
               };

               $scope.del = function(name) {
                   if(window.confirm("是否删除")) {
                       for(index in $scope.users) {
                           if(name == $scope.users[index].name) {
                               $scope.users.splice(index, 1);
                           }
                       }
                   }
               }

           });
       </script>
   </head>

   <body ng-app="myapp" ng-controller="myctrl">
       <center>
           <h3>用户列表</h3> 姓名查询条件
           <input type="text" ng-model="chaname" />
           <select ng-model="agea">
               <option value="">-选择排序-</option>
               <option value="-age">按年龄倒序</option>
               <option value="age">按年龄正序</option>
           </select>
           <table border="1px soild black" cellspacing="0" cellpadding="10">
               <tr style="background: #999999;">
                   <th>姓名</th>
                   <th>年龄</th>
                   <th>拼音</th>
                   <th>职位</th>
                   <th>操作</th>
               </tr>
               <tr ng-repeat="u in users | orderBy:agea">
                   <td>{{u.name}}</td>
                   <td>{{u.age}}</td>
                   <td>{{u.pinyin}}</td>
                   <td>{{u.position}}</td>
                   <td><button style="cursor: pointer;background: none;border: none;" ng-click="del(u.name)">删除</button></td>
               </tr>
           </table>
           <button ng-click="cha()" id="button">查询</button>
           <button ng-click="add()" id="button">添加用户</button>
           <fieldset style="width: 400px;" ng-show="tianjia">
               <legend>添加用户信息</legend>
               姓名 <input type="text" ng-model="newname" /><br /><br /> 年龄 <input type="text" ng-model="newage" /><br /><br /> 拼音 <input type="text" ng-model="newpinyin" /><br /><br /> 职位 <input type="text" ng-model="newposition" /><br /><br />
               <button ng-click="bao()">保存</button>
           </fieldset>
       </center>
   </body>

</html>

阅读全文

0 0

姓名查询 年龄排序 添加用户 删除

姓名查询年龄排序添加用户删除