angular增删改

<!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.js" ></script>
       <script>
           var app = angular.module("myApp", []);
           app.controller("myCtrl", function($scope) {
               //加入假数据
               $scope.datas = [{
                       id: 1001,
                       name: "iphone6",
                       price: 6888,
                       num: 1,
                       state: false
                   },
                   {
                       id: 1002,
                       name: "iphone4s",
                       price: 7888,
                       num: 1,
                       state: false
                   }, {
                       id: 1003,
                       name: "iphoneX",
                       price: 8888,
                       num: 1,
                       state: false
                   }
               ];
               //点击根据名字删除
               $scope.del = function(na) {
                   if(window.confirm("你确定删除" + na + "吗")) {
                       for(index in $scope.datas) {
                           if(na == $scope.datas[index].name) {
                               $scope.datas.splice(index, 1);
                           }
                       }
                   }
               }
               //点击-号减去数量
               $scope.jian = function(index) {
                   if($scope.datas[index].num > 1) {
                       $scope.datas[index].num--;
                   } else {
                       alert("不能再减啦！，你可以删除商品")
                   }
               }
               //点击+号增加数量
               $scope.jia = function(index) {

                   $scope.datas[index].num++;

               }
               //总价格
               $scope.prices = function() {
                   var p = 0;
                   for(var x = 0; x < $scope.datas.length; x++) {
                       p += $scope.datas[x].num * $scope.datas[x].price;
                   }
                   return p;
               }
               //总数量
               $scope.content = function() {
                   var p = 0;
                   for(var x = 0; x < $scope.datas.length; x++) {
                       p += $scope.datas[x].num;
                   }
                   return p;
               }

               $scope.add = function() {
                   var flag1 = false;
                   var flag2 = false;
                   var flag3 = false;
                   var flag4 = false;
                   //判断非空必须为数字
                   if($scope.ID == "" || $scope.ID == null) {
                       alert("id不能为空");
                       flag1 = false;
                   } else if(isNaN($scope.ID)) {
                       alert("id必须为数字");
                       flag1 = false;
                   } else {
                       flag1 = true;
                   }

                   if($scope.IDname == "" || $scope.IDname == null) {
                       alert("商品不能为空");
                       flag2 = false;
                   } else {
                       flag2 = true;
                   }

                   if($scope.IDnum == "" || $scope.IDnum == null) {
                       alert("数量不能为空");
                       flag3 = false;
                   } else if(isNaN($scope.IDnum)) {
                       alert("数量必须为数字");
                       flag3 = false;
                   } else {
                       flag3 = true;
                   }

                   if($scope.IDprice == "" || $scope.IDprice == null) {
                       alert("单价不能为空");
                       flag4 = false;
                   } else if(isNaN($scope.IDprice)) {
                       alert("单价必须为数字");
                       flag4 = false;
                   } else {
                       flag4 = true;
                   }
                   //点击添加显示数据
                   if(flag1 && flag2 && flag3 && flag4) {
                       $scope.datas.push({
                           id: $scope.ID,
                           name: $scope.IDname,
                           num: $scope.IDnum,
                           price: $scope.IDprice
                       });
                   }

               }

               //全选反选
               $scope.selectAll = false;
               $scope.selectAllFun = function() {
                   if($scope.selectAll) {
                       for(index in $scope.datas) {
                           $scope.datas[index].state = true;
                       }
                   } else {
                       for(index in $scope.datas) {
                           $scope.datas[index].state = false;
                       }
                   }
               }

               //批量删除
               $scope.delSelect = function() {
                   //定义一个空数组
                   var arr = [];
                   for(index in $scope.datas) {
                       if($scope.datas[index].state) {
                           arr.push($scope.datas[index].name);
                       }
                   }
                   if(arr.length <= 0) {
                       alert("请重新选择删除的项目！");
                   } else {
                       if(window.confirm("确定要删除吗?")) {
                           for(index in arr) {
                               for(index2 in $scope.datas) {
                                   if(arr[index] == $scope.datas[index2].name) {
                                       $scope.datas.splice(index2, 1);
                                   }
                               }
                           }
                       } else {
                           alert("你已取消删除！");
                       }
                   }
               }

               //修改页面
               $scope.updateShow = false;
               $scope.updateId = "";
               $scope.updateName = "";
               $scope.updateNum = "";
               $scope.updatePrice = "";
               $scope.updateShowFun = function(aa) {
                   if(window.confirm("你确定要修改吗？请在考虑一下！")) {
                       $scope.updateShow = true;
                       $scope.updateId = aa.id;
                       $scope.updateName = aa.name;
                       $scope.updateNum = aa.num;
                       $scope.updatePrice = aa.price;
                   } else {
                       alert("你已经取消了修改哟！");
                   }
               }
               $scope.updateSub = function() {
                   $scope.updateArr = [];
                   if($scope.updateName == "" || $scope.updateName == null) {
                       $scope.updateArr.push("产品名称为空");
                   }
                   if($scope.updatePrice == "" || $scope.updatePrice == null) {
                       $scope.updateArr.push("产品价格为空");
                   } else if(isNaN($scope.updatePrice)) {
                       $scope.updateArr.push("产品价格不是整数");
                   }

                   //验证不满足
                   if($scope.updateArr.length > 0) {
                       $scope.yz = true;
                   } else {
                       $scope.yz = false;
                       for(index in $scope.datas) {
                           if(parseInt($scope.updateId) == $scope.datas[index].id) {
                               $scope.datas[index].name = $scope.updateName;
                               $scope.datas[index].num = $scope.updateNum;
                               $scope.datas[index].price = $scope.updatePrice;
                               $scope.updateShow = false;
                           } else {
                               alert("验证成功！");
                           }
                       }
                   }
               }

           });
       </script>
       <style>
           .css1 {
               background-color: antiquewhite;
           }

           .css2 {
               background-color: burlywood;
           }

           .sb {
               cursor: pointer;
           }
       </style>
   </head>

   <body ng-app="myApp" ng-controller="myCtrl">

       <center>

           <input type="text" placeholder="请输入查询商品" ng-model="search" /> 数量排序:
           <select ng-model="selOrder">
               <option value="num">数量正序</option>
               <option value="-num">数量倒序</option>
           </select>
           <button ng-click="delSelect()" class="sb">批量删除</button><br />
           <table border="2" cellspacing="0" width="800">
               <thead>
                   <tr align="center" style="background-color: #DCDCDC;">
                       <td><input type="checkbox" ng-model="selectAll" ng-click="selectAllFun()" /></td>
                       <td width="100px">商品编号</td>
                       <td width="100px">商品名称</td>
                       <td width="250px">商品数量</td>
                       <td width="100px">商品单价</td>
                       <td width="100px">商品总价</td>
                       <td width="110px">商品操作</td>
                   </tr>
               </thead>
               <tbody>
                   <tr ng-repeat="a in datas | filter:{name:search}| orderBy:selOrder " class="{{ $even ? 'css1':'css2'}}" align="center">
                       <td><input type="checkbox" ng-model="a.state" /></td>
                       <td>{{a.id}}</td>
                       <td>{{a.name}}</td>
                       <td>
                           <button ng-click="jian($index)">-</button>
                           <input type="number" ng-model="a.num" />
                           <button ng-click="jia($index)">+</button>
                       </td>
                       <td>{{a.price}}</td>
                       <td>{{a.price*a.num}}</td>
                       <td><button ng-click="del(a.name)" class="sb">删除</button>
                           <button ng-click="updateShowFun(a)" class="sb">修改</button>
                       </td>
                   </tr>
               </tbody>
           </table>
           <h3>总金额:{{prices()}}      总数量:{{content()}}</h1>
               <form style="border: 1px solid yellow; width: 300px;">
                   <h3>添加商品</h3>
                   商品编号:<input type="text" ng-model="ID"/><br /><br />
                   商品名称:<input type="text" ng-model="IDname"/><br /><br />
                   商品数量:<input type="number" ng-model="IDnum"/><br /><br />
                   商品单价:<input type="text" ng-model="IDprice"/><br /><br />
                   <button ng-click="add()" class="sb">添加</button>
               </form>
               <form style="border: 1px solid blue; width: 300px;" ng-show="updateShow">
                   <h3>修改商品</h3> 商品编号:
           <input type="text" placeholder="商品编号" ng-model="updateId" disabled="disabled" /><br /><br /> 商品名称:
           <input type="text" placeholder="商品名称" ng-model="updateName" /><br /><br /> 商品数量:
           <input type="number" placeholder="商品数量" ng-model="updateNum" /><br /><br /> 商品单价:
           <input type="text" placeholder="商品单价" ng-model="updatePrice" /><br /><br />
           <div style="border: 1px solid blue; width: 250px; background-color: pink;" ng-show="yz">
               <ul>
                   <li ng-repeat="chenk in updateArr">{{chenk}}</li>
               </ul>
           </div><br />
           <input type="button" value="提交" ng-click="updateSub()" class="sb" />
           </form>
       </center>
   </body>

</html>

猜你喜欢