程序博客网 > 网络凸凸是什么意思

Angular,添加,删除,查询,排序

来源：互联网发布：网络凸凸是什么意思编辑：程序博客网时间：2024/05/16 07:46

<!DOCTYPE html>

<html>
<head>
<meta charset="utf-8" />

<title></title>

<!--

导入外部js、css

-->

       <script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
       <script type="text/javascript" src="js/angular.min.js" ></script>
       <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
       <style type="text/css">
           fieldset {
               padding: .35em .625em .75em;
               margin: 0 2px;
               border: 1px solid silver
           }

           legend {
               padding: .5em;
               border: 0;
               width: auto
           }
       </style>
   </head>
   <body ng-app="myApp" ng-controller="myCtrl">
       姓名查询条件:<input type="text" id="name" />
       <select id="paixu" ng-options="x for x in orders" ng-model="selected" ng-init="selected=orders[0]" ng-change="change()">
       </select>
       <br />
       用户列表
       <br />
       <table border="1px" cellspacing="0px" cellpadding="0px" class="table-striped table-hover">
           <tr style="background: #999999;">
               <td>姓名</td>
               <td>年龄</td>
               <td>拼音</td>
               <td>职位</td>
               <td>操作</td>
           </tr>
           <tr ng-repeat="person in persons">
               <td>{{person.name}}</td>
               <td>{{person.age}}</td>
               <td>{{person.pinyin}}</td>
               <td>{{person.zhiwei}}</td>
               <td><a href="#" ng-click="dele($index)">删除</a></td>
           </tr>
       </table>
       <input type="button" id="cha" value="查询" ng-click="cha()" />
       <input type="button" id="add" value="添加用户" ng-click="add()" />
       <form id="f">
           <fieldset id="">
               <legend>添加用户信息</legend>
               姓名:<input type="text" name="name1" id="name1" /><br />
               年龄:<input type="text" name="age" id="age" /><br />
               拼音:<input type="text" name="pinyin" id="pinyin" /><br />
               职位:<input type="text" name="zhiwei" id="zhiwei" /><br />
               <input type="button" value="保存" ng-click="save()" />
           </fieldset>
       </form>
       <script type="text/javascript">
           //默认下面添加页面隐藏
           $("#f").hide();

           var m = angular.module("myApp", []);
           m.controller("myCtrl", function($scope) {

               //初始化数据
               $scope.persons = [{
                   "name": "张三",
                   "age": 20,
                   "pinyin": "zhangsan",
                   "zhiwei": "总经理"
               }, {
                   "name": "李四",
                   "age": 25,
                   "pinyin": "lisi",
                   "zhiwei": "副经理"
               }, {
                   "name": "王五",
                   "age": 22,
                   "pinyin": "wangwu",
                   "zhiwei": "工程师"
               }];
               //查询
               //----------查询-----------
               $scope.cha = function() {

                       //取值
                       var name = $("#name").val();
                       //                   alert(name)
                       //判断
                       if (name == "") {
                           alert("请输入姓名");
                           return;
                       }
                       //敏感词
                       if (name.indexOf("奥") != -1) {
                           alert("有敏感词");
                           return;
                       }
                       var newPersons = [];
                       //是否含有
                       for (var i = 0; i < $scope.persons.length; i++) {
                           var p = $scope.persons[i];
                           if (p.name == name) {
                               newPersons.push(p);
                           }
                       }
                       //之后判断新的数组是否是为空
                       if (newPersons.length == 0) {
                           alert("没有匹配项");
                           return;
                       }
                       $scope.persons = newPersons;
                   }
               $scope.orders = ["按年龄正序排列", "按年龄倒序排列"];
               //change事件
               $scope.change = function() {

                       var pai = $("#paixu").val();
                       alert("dd" + pai)
                       if (pai == "string:按年龄正序排列") {
                           $scope.persons.sort(function(a, b) {
                               if (a.age > b.age) {
                                   return 1;
                               } else if (a.age < b.age) {
                                   return -1;
                               }
                               return 0;
                           });
                       } else {
                           $scope.persons.sort(function(a, b) {
                               if (a.age > b.age) {
                                   return -1;
                               } else if (a.age < b.age) {
                                   return 1;
                               }
                               return 0;
                           });
                       }
                   }
              //显示动画
               $scope.add = function() {
                       $("#f").show(1000);
                   }
                   //save
               $scope.save = function() {
                       //验证年龄
                       var age = $("#age").val();
                       var b = isNaN(age);
                       if (b == true) { //如果不是一个数字就是 true
                           alert("年龄格式不正确")
                           return
                       }
                       //添加
                       var name12 = $("#name1").val();
                       var age = $("#age").val();
                       var pinyin = $("#pinyin").val();
                       var zhiwei = $("#zhiwei").val();
                       var pe = {
                           "name": name12,
                           "age": age,
                           "pinyin": pinyin,
                           "zhiwei": zhiwei
                       }; //创建ｐｅｒｓｏｎ对象
                       $scope.persons.push(pe);
                       //消失
                       $("#f").hide();
                   }
              //删除
              $scope.dele=function($index){
               var c=confirm("是否确认删除?");
               if(c==true){
                   $scope.persons.splice($index,1);
               }
              }
           });
       </script>
   </body>
</html>

阅读全文

1 0

网络凸凸是什么意思

网络凸凸是什么意思

原创粉丝点击

热门问题 老师的惩罚人脸识别我在镇武司摸鱼那些年重生之率土为王我在大康的咸鱼生活盘龙之生命进化天生仙种凡人之先天五行春回大明朝姑娘不必设防，我是瞎子床头不得不对门怎么办床铺对门怎么办图片富贵竹竹竿发黄怎么办沙发靠窗户怎么办窗户对路怎么办办公桌背靠窗怎么办位置背靠窗户怎么办办公室背靠窗户怎么办卧室没有窗户怎么办厕所没有窗户怎么办楼上漏水怎么办厕所在东方怎么办西南方是厕所怎么办家里缺东南角怎么办房子缺东边怎么办怎么办房子缺东北角房子没有靠山怎么办家中财位是个门怎么办卫生间在西南角怎么办住宅缺西北角怎么办厨房有横梁怎么办厕所镜子对门怎么办卫生间在西北角怎么办命犯太岁怎么办 2016属虎犯太岁怎么办被小人算计怎么办犯口舌怎么办风水不好怎么办卧室在六煞位怎么办水培铜钱草烂根怎么办仙人山不长怎么办我的山影拳不长怎么办龙骨花烂根怎么办房子缺角怎么办没有缺省值怎么办心肌缺血怎么办院子缺东南角怎么办红豆杉干枯了怎么办红豆杉根雕开裂怎么办红豆杉茶盘开裂怎么办碧根果放潮了怎么办