angular增，删，改，查

最新推荐文章于 2018-04-10 09:19:20 发布

duderi1

最新推荐文章于 2018-04-10 09:19:20 发布

阅读量219

点赞数

本文链接：https://blog.csdn.net/Noviceduderi/article/details/78861615

版权

<!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;
           }

           .div1 {
               width: 600px;
           }

           .div2 {
               width: 600px;
           }

           .tab {
               width: 600px;
           }

           .tab td {
               text-align: center;
           }

           .bu2 {
               width: 100px;
           }

           .bu1 {
               width: 60px;
           }

           .bu3 {
               width: 100px;
           }
       </style>
   </head>

   <body ng-app="myapp" ng-controller="cre">

       <div class="div1">
           <p>管理信息</p>
           <input type="button" value="批量删除" ng-click="pi()" />          用户名:
           <input type="text" ng-model="yong" ng-keydown="cha($event)" />        
           <select ng-model="nian" ng-init="nian=names[0]" ng-change="ling()">
               <option ng-repeat="x in names">{{x}}</option>
           </select>        
           <input type="button" value="添加" class="bu2" ng-click="tian()" /><br /><br />
           <table border="1px" cellspacing="0px" cellpadding="0px" class="tab">
               <tr>
                   <th><input type="checkbox" ng-model="check" ng-click="quan()" /></th>
                   <th>姓名</th>
                   <th>年龄</th>
                   <th>城市</th>
                   <th>录入日期</th>
                   <th>操作</th>
               </tr>
               <tr ng-repeat="good in goods|filter:bb">
                   <td><input type="checkbox" ng-model="good.ckb" /></td>
                   <td>{{good.name}}</td>
                   <td>{{good.age}}</td>
                   <td>{{good.city}}</td>
                   <td>{{good.data|date:"yyyy-MM-dd"}}</td>
                   <td><input type="button" value="修改" class="bu1" ng-click="xiu($index)" />    <input type="button" value="删除" class="bu1" ng-click="shan($index)" /></td>
               </tr>
           </table>
       </div><br />
       <div class="div2" ng-show="show">
           姓名:<input type="text" ng-model="uname" class="bb" /><br /> 年龄:
           <input type="text" ng-model="uage" class="bb" /><br /> 城市:
           <input type="text" ng-model="ucity" class="bb" /><br />         
           <input type="button" value="OK" class="bu3" ng-click="bao()" ng-model="ind" />
       </div>

   </body>
   <script>
       //注入
       var mo = angular.module("myapp", [])
       //创建控制器
       mo.controller("cre", function($scope) {
           //定义数组
           var arr = [{
                   "name": "张三",
                   "age": 20,
                   "city": "北京",
                   "data": new Date(343534534534).getTime()
               },
               {
                   "name": "李四",
                   "age": 16,
                   "city": "上海",
                   "data": new Date(243534534534).getTime()
               },
               {
                   "name": "王五",
                   "age": 30,
                   "city": "天津",
                   "data": new Date(443534534534).getTime()
               }
           ]
           $scope.names = ["以年龄倒序", "以年龄正序"];

           //初始化
           $scope.goods = arr;


           //单行删除
           $scope.shan = function($index) {
               $scope.goods.splice($index, 1);
           }


           //全选和全不选
           $scope.quan = function() {
               var chec = $scope.check;
               if(chec == true) {
                   for(var i = 0; i < $scope.goods.length; i++) {
                       $scope.goods[i].ckb = true;
                   }
               } else {
                   for(var i = 0; i < $scope.goods.length; i++) {
                       $scope.goods[i].ckb = false;
                   }
               }
           }

           //批量删除
           $scope.pi = function() {
               for(var i = 0; i < $scope.goods.length; i++) {
                   if($scope.goods[i].ckb == true) {
                       $scope.goods.splice(i, 1);
                       i--;
                   }
               }
           }


           //模糊查询
           $scope.cha = function($event) {
               //定义临时数组
               var arr_1 = [];
               //获取键盘编码
               var code = $event.keyCode
               //判断是否是当前按下的键
               if(code == 13) {
                   for(var i = 0; i < arr.length; i++) {
                       if(arr[i].name.indexOf($scope.yong) != -1) {
                           arr_1.push(arr[i])
                       }
                       //赋值
                       $scope.goods = arr_1;
                   }
               }
           }


           //以年龄排序
           $scope.ling = function() {
               //获取年龄的值
               var aa = $scope.nian;
               if(aa == "以年龄正序") {
                   arr.sort(function(a, b) {
                       return a.age - b.age;
                   });
               } else {
                   arr.sort(function(a, b) {
                       return b.age - a.age;
                   });
               }
               $scope.goods = arr;
           }

           //添加
           var cc = true; //标识符
           $scope.tian = function() {
               $scope.show = true;
               //标识符
               cc = true;
           }

           //保存数据的方法
           $scope.bao = function() {

               if(cc == true) {
                   //创建对象
                   var good = {
                       "name": $scope.uname,
                       "age": $scope.uage,
                       "city": $scope.ucity,
                       "data": new Date().getTime()
                   }
                   arr.push(good);

                   $scope.goods = arr;
                   $scope.show = false;
                   return;
               }

               if(cc == false) {
                   var good = {
                       "name": $scope.uname,
                       "age": $scope.uage,
                       "city": $scope.ucity,
                       "data": new Date().getTime()
                   }
                   arr.splice($scope.ind, 1, good);

                   $scope.goods = arr;
                   //隐藏
                   var sh = $scope.show = false;
                   if(sh == false) {
                       //清空
                       $(".bb").val("");
                   }
                   return;
               }

           }

           //修改的方法
           $scope.xiu = function($index) {
               var a1 = $scope.goods[$index].name;
               var a2 = $scope.goods[$index].age;
               var a3 = $scope.goods[$index].city;
               //回显
               $scope.show = true;
               $scope.uname = a1;
               $scope.uage = a2;
               $scope.ucity = a3;
               //标识符
               cc = false;

               $scope.ind = $index;
           }

       });

   </script>

</html>