angularJs添加，删除，查询

来源：互联网发布：怎么对付熊孩子知乎编辑：程序博客网时间：2024/05/16 01:48

<!DOCTYPE html>
<html>

   <head>
       <meta charset="utf-8" />
       <title></title>
       <script type="text/javascript" src="js/angular.min.js"></script>
       <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>

       <style>
           * {
               margin: 0px auto;
               padding: 0px;
           }

           table tr:nth-of-type(odd) {
               background: #00ccff;
           }

           table tr:nth-of-type(even) {
               background: #ffcc00;
           }

           .div1 {
               width: 600px;
           }

           .fie {
               width: 600px;
               height: 400px;
           }

           .fie_div {
               margin-left: 200px;
           }

           .in1 {
               width: 100px;
               height: 30px;
               margin-left: 250px;
           }

           .tab {
               width: 600px;
           }

           .tab tr {
               text-align: center;
           }
           /*鼠标移上删除变成小手样式*/

           p:hover {
               cursor: pointer;
           }
       </style>

   </head>

   <body ng-app="myapp" ng-controller="cre">
       <div class="div1">
           <div>
               <span>用户列表</span>         姓名查询条件
               <input type="text" ng-model="xing" />        

               <select ng-change="change()" ng-model="age1" ng-init="age1=ages[0]">
                   <option ng-repeat="x in ages">{{x}}</option>
               </select>

           </div>
           <table border="1px" cellspacing="0px" class="tab">
               <tr style="background: darkgray;">
                   <th>姓名</th>
                   <th>年龄</th>
                   <th>拼音</th>
                   <th>职位</th>
                   <th>操作</th>
               </tr>
               <tr ng-repeat="good in goods">
                   <td>{{good.name}}</td>
                   <td>{{good.age}}</td>
                   <td>{{good.pin}}</td>
                   <td>{{good.zhi}}</td>
                   <td>
                       <p ng-click="dele($index)">删除</p>
                   </td>
               </tr>
           </table><br /><br />
           <input type="button" value="查询" class="in2" id="in2" ng-click="chaxun()" />      <input type="button" value="添加用户" class="in2" ng-click="xianshi()" />

       </div>

       <fieldset class="fie" ng-show="xian">
           <legend>添加用户信息</legend>
           <legend>添加用户信息</legend>
           <div class="fie_div">
               姓名:<input type="text" ng-model="name" /><br /><br /> 年龄:
               <input type="text" ng-model="age" /><br /><br /> 拼音:
               <input type="text" ng-model="pin" /><br /><br /> 职位:
               <input type="text" ng-model="zhi" /><br /><br />
           </div>
           <input type="button" value="保存" class="in1" ng-click="bao()" />
       </fieldset>

   </body>

   <script>
       //注入
       var mo = angular.module("myapp", []);
       //创建控制器
       mo.controller("cre", function($scope) {
           //定义数组
           $scope.ages = ["按年龄正序排序", "按年龄倒序排列"];
           $scope.goods = [];
           //防止二次查询失败定义的新数组
           $scope.names = [];

           //显示添加保存的方法
           $scope.xianshi = function() {
               $scope.xian = true;
           }

           //添加的方法
           $scope.bao = function() {
               //判断年龄是否为数字
               if(!$.isNumeric($scope.age)) {
                   alert("年龄格式错误")
                   return;
               } else {
                   //创建对象
                   var good = {
                       "name": $scope.name,
                       "age": $scope.age,
                       "pin": $scope.pin,
                       "zhi": $scope.zhi
                   }
                   //将对象放到数组中
                   $scope.names.push(good);
                   $scope.goods.push(good);
               }
               //隐藏添加保存
               var flg = $scope.xian = false;
               //判断是否为false如果是的话就清空.fie_div里的内容
               if(flg == false) {
                   $(".fie_div :input").val("");
               }
           }

           //删除方法
           $scope.dele = function($index) {
               //js 弹出框
               var aa = confirm("是否要删除");
               //判断是否为true
               if(aa == true) {
                   //删除
                   $scope.goods.splice($index, 1);
               } else {
                   return false;
               }
           }

           //查询方法
           $scope.chaxun = function() {
               //防止二次查询失败
               $scope.goods = $scope.names;
               //定义新数组
               var arr = [];
               var xing = $scope.xing;
               if(xing == "" || xing == null) {
                   alert("请输入你要查询的姓名");
                   return;
               }
               //敏感词过滤
               if(xing.indexOf("sb") != -1) {
                   alert("输入内容有敏感词")
               }
               //遍历
               for(var i = 0; i < $scope.goods.length; i++) {
                   //取出数组里的每个姓名
                   var name = $scope.goods[i].name;
                   //判断查询的姓名是否与数组里的姓名匹配
                   if(xing == name) {
                       //把查询出来的对象放到新的数组里(arr)
                       arr.push($scope.goods[i]);
                   }
               }

               //判断新的数组里是否有数据
               if(arr.length == 0) {
                   alert("没有匹配项");
                   return;
               }

               $scope.goods = arr;

           }

           //排序
           $scope.change = function() {
               var a1 = $scope.age1;
               if(a1 == "按年龄倒序排列") {
                   $scope.goods.sort(function(a, b) {
                       return b.age - a.age;
                   });
               } else {
                   $scope.goods.sort(function(a, b) {
                       return a.age - b.age;
                   });
               }
           }
       });
   </script>

</html>

阅读全文

0 0