angular 简单的增删查

来源：互联网发布：崩坏学园2官方淘宝编辑：程序博客网时间：2024/06/07 18:38

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       
       <style>* {
   margin: 0 auto;
   padding: 0;
}

body {
   position: relative;
   width: 700px;
   height: 500px;
}

#div1 {
   margin-top: 20px;
   width: 500px;
   height: 300px;
}

#div2 {
   float: right;
   margin-left: 100px;
}

.ta1 {
   margin-top: 10px;
   width: 500px;
   text-align: center;
}

a {
   text-decoration: none;
   color: black;
}
/*隔行变色*/
.tr1 {
   background: #EEEEEE;
}

.tr2 {
   background: #FFFFFF;
}

.but1 {
   margin-top: 20px;
   margin-left: 100px;
   background: ghostwhite;
   width: 100px;
   height: 40px;
   border-radius: 8px;
}

.div3 {
   text-align: center;
   width: 300px;
   position: absolute;
   margin-top: 10px;
   margin-left: 100px;
   margin-left: ;
   font-size: 23px;
   border: 1px solid yellowgreen;
}

.div3 input {
   margin-top: 5px;
   height: 30px;
}

#aa {
   cursor: pointer;
}</style>
   <script type="text/javascript" src="js/angular.min.js" ></script>
   <script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
   </head>
   <body ng-app="myapp" ng-controller="mycrl">

       <div id="div1">
                 姓名查询条件<input type="text" ng-model="chaname"/>
           <div id="div2">
               <select ng-model="selectname" ng-init="selectname=order[0]" ng-change="chan()" ng-options="item for item in order">{{item}}</select>
           </div>
           <table border="1px" cellpadding="0px" cellspacing="0px" class="ta1">
               <tr style="background: #999999;">
                   <th>姓名</th>
                   <th>年龄</th>
                   <th>拼音</th>
                   <th>职位</th>
                   <th>操作</th>
               </tr>
               <tr ng-repeat="s in student1" class="{{ $even ? 'tr1': 'tr2'}}">
                   <td>{{s.name}}</td>
                   <td>{{s.age}}</td>
                   <td>{{s.pin}}</td>
                   <td>{{s.zhiwei}}</td>
                   <td><a href="#" ng-click="dele($index)" id="aa">删除</a></td>
               </tr>
           </table>
           <input class="but1" type="button" value="查询" ng-click="cha()"/>
           <input class="but1" type="button" value="添加" ng-click="add()"/>

           <div class="div3" ng-show="isshow">
               姓名<input type="text" class="name" ng-model="name"/><br />
               年龄<input type="text" class="age" ng-model="age"/><br />
               拼音<input type="text" class="pin" ng-model="pin"/><br />
               职位<input type="text" class="zhiwei" ng-model="zhiwei"/><br />
              <input type="button" ng-click="bc()" value="保存" style="width: 100px;font-size: 23px;height: 40px;margin-left: 40px;" />
           </div>
       </div>



       <script type="text/javascript">var mo = angular.module("myapp", []);
mo.controller("mycrl", function($scope) {
   $scope.order = ["请选择排序方式", "按照年龄倒序排序", "按照年龄正序排序"];
   //用于开始展示数据
   var student = [{
           "name": "张三",
           "age": 45,
           "pin": "zhang san",
           "zhiwei": "总经理"
       },
       {
           "name": "李四",
           "age": 43,
           "pin": "li si",
           "zhiwei": "设计师"
       }
   ];
   //查询时用的数据
   $scope.student1 = [];
   $scope.student1 = student;
   //排序
   $scope.chan = function() {
       var selectn = $scope.selectname;
       if(selectn == "按照年龄正序排序") {
           $scope.student1.sort(function(a, b) {
               return a.age - b.age;
           })
       } else if(selectn == "按照年龄倒序排序") {
           $scope.student1.sort(function(a, b) {
               return b.age - a.age;
           })
       }
   }
   //查询
   $scope.cha = function() {
       var na = $scope.chaname;
       if(na == "" || na == undefined) {
           alert("请输入姓名");
           return "";
       }

       if(na.indexOf("擦") != -1) {
           alert("搜索内容有敏感词");
           return "";
       }

       var newname = [];
       for(var i = 0; i < student.length; i++) {
           //获取数组的元素
           var na = student[i].name;
           //判断是否符合
           if(na.indexOf($scope.chaname) != -1) {
               //添加到新集合
               newname.push(student[i]);
           }
       }
       if(newname.length == 0) {
           alert("未找到内容");
           return "";
       } else {
           //把数据付给要展示的集合
           $scope.student1 = newname;
           return "";
       }
   }

   //点击添加按钮要显示添加框
   $scope.add = function() {
       $scope.isshow = true;
   }
   //点击保存按钮
   $scope.bc = function() {
       //获取数据
       var name = $scope.name;
       var te = /^[0-9]+$/;
       var age = $scope.age;
       var pin = $scope.pin;
       var zhiwei = $scope.zhiwei;
       //判断年龄
       if(te.test(age) == false) {
           alert("年龄格式错误");
           return;
       }
       //添加到数组初始化的数组
       student.push({
           "name": name,
           "age": age,
           "pin": pin,
           "zhiwei": zhiwei
       });
       //在赋值给展示的数组
       $scope.student1 = student;
       //添加后将输入框赋值为""
       $scope.name = "";
       $scope.age = "";
       $scope.pin = "";
       $scope.zhiwei = "";
       //隐藏添加表格
       $scope.isshow = false;
   }

   //删除
   $scope.dele = function($index) {
       var falg = confirm("是否删除");
       if(falg) {
           //删除初始化数组的元素
           for(var i = 0; i < student.length; i++) {
               if(student[i].name == $scope.student1[$index].name) {
                   student.splice(i, 1);
               }
           }
           //删除展示数组的元素
           $scope.student1=student;
           alert("删除成功");
       }
   }
});</script>
   </body>
</html>

阅读全文

0 0