AngularJS，html，css，js技术

最新推荐文章于 2021-08-11 10:52:18 发布

小胖胖哈

最新推荐文章于 2021-08-11 10:52:18 发布

阅读量367

点赞数

本文链接：https://blog.csdn.net/xxb52306/article/details/78596436

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <script type="text/javascript" src="../agulajs/angular.js" ></script>
       <script>
           var app=angular.module("myApp",[]);
           app.controller("myCtrl",function($scope){
               $scope.goods=[{
                               name:"张三",
                               age:45,
                               English:"zhangsan",
                               job:"总经理"
                              },{
                               name:"李四",
                               age:45,
                               English:"lisi",
                               job:"设计师"
                              },{
                               name:"王五",
                               age:40,
                               English:"wangwu",
                               job:"工程师"
                              },{
                                 name:"赵六",
                                age:33,
                                English:"zhaoliu",
                                job:"工程师"
                              },{
                                 name:"周七",
                                age:32,
                                English:"zhouqi",
                                job:"人事经理"
                              }];

                    /*//删除商品
                   $scope.del=function(name){
                           var arr=[];
                      if(window.confirm("确定要删除吗？？")){
                          for(index in $scope.goods){
                            if(name==$scope.goods[index].name){

                                  arr.push(name);
                              }
                            }
                      }
                      //删除
                      for(index in arr){
                         var name=arr[index]
                          for(index2 in $scope.goods){
                                if(name==$scope.goods[index2].name){
                                    $scope.goods.splice(index2,1);

                                    alert("删除成功");
                                }
                           }
                      }
                   }*/
                  //删除商品
               $scope.del=function(delname){
                   if(window.confirm("确定要删除吗？？")==true){
                     for(index in $scope.goods){
                           if(delname==$scope.goods[index].name){
                              $scope.goods.splice(index,1);
                              alert("删除成功");
                           }
                      }
                   }
               }

           //初始化
           $scope.order="";



           //过滤姓名
           $scope.name="";
           $scope.flag="";
           $scope.flag2=false;
           $scope.filName=function(){
              if($scope.name.indexOf("敏感字符")>=0){
                  alert("不能包含敏感字符");
                  $scope.flag="";
              }
              if($scope.name == ""){
                  alert("请输入姓名");
                  $scope.flag="";
              }else{
                  for(index in $scope.goods){
                      if($scope.name == $scope.goods[index].name){
                          $scope.flag=$scope.name;
                          $scope.flag2=true;

                      }else if($scope.goods[index].name.indexOf($scope.name)>=0){
                          $scope.flag=$scope.name;
                          $scope.flag2=true;
                      }
                  }
              }
              if(!$scope.flag2){
                  alert("没有找到匹配项");
              }
          }

          //确定用户提交页面显示隐藏
            $scope.isShow=false;
            $scope.show=function(){
               if($scope.isShow){
                   $scope.isShow=false;
               }else{
                   $scope.isShow=true;
               }
            }

          //验证 age--->Angular
               $scope.newName="";
               $scope.newEnglish="";
               $scope.newAge="";
               $scope.newjob="";
              $scope.checkAge=function(){
                 if($scope.newAge==""||$scope.newAge==null){
                    alert("年龄不能为空");
                 }else if(isNaN($scope.newAge)){
                    alert("年龄格式不对");
                 }else if($scope.newAge<0||$scope.newAge>150){
                    alert("输入的不是人的年龄");
                 }else{
                    var person ={
                        name:$scope.newName,
                        age:parseInt($scope.newAge),
                        English:$scope.newEnglish,
                        job:$scope.newjob
                    };
                    $scope.goods.push(person);
                 }
              }
           });
       </script>
       <style>
           table tr:nth-child(odd){
               background:#FFFF00;
           }

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

           table tr:hover{
               background:#D25234;
           }
           a{text-decoration: none;}
       </style>
   </head>
   <body ng-app="myApp" ng-controller="myCtrl">
       <center>
       <div>
       姓名查询条件 <input type="text" style="margin-top: 30px;" ng-model="name"/>
       <select ng-model="order">
           <option value="">按年龄排序</option>
           <option value="age">年龄正序排序</option>
           <option value="-age">年龄逆序排序</option>
       </select>
       </div>
       <table border="1" cellpadding="10" cellspacing="0" width="600px">
           <thead>
               <tr>
                   <td>姓名</td>
                   <td>年龄</td>
                   <td>拼音</td>
                   <td>职位</td>
                   <td>操作</td>
               </tr>
           </thead>
           <tbody>
               <tr ng-repeat="user in goods | orderBy:order | filter:flag">
                   <td>{{user.name}}</td>
                   <td>{{user.age}}</td>
                   <td>{{user.English}}</td>
                   <td>{{user.job}}</td>
                   <td><a href="#" ng-click="del(user.name)">删除</a></td>
               </tr>
           </tbody>
       </table><br>
           <button ng-click="filName()">查询</button>
           <button ng-click="show()">添加用户</button>
           <div ng-show="isShow">
              <h3>添加用户</h3>
                  用户名：<input type="text" placeholder="请输入用户名" ng-model="newName"/><br /><br />
               拼　音：<input type="text" placeholder="请输入拼音" ng-model="newEnglish"/><br /><br />
               年　龄：<input type="text" placeholder="请输入年龄" ng-model="newAge"/><br /><br />
               职　位：<input type="text" placeholder="请输入职位" ng-model="newjob"/><br /><br />
               <input type="button" ng-click="checkAge()" value="提交" />
           </div>
       </center>
   </body>
</html>