angular增删改查无异议

最新推荐文章于 2022-07-15 10:37:12 发布

Guiyide

最新推荐文章于 2022-07-15 10:37:12 发布

阅读量277

点赞数

本文链接：https://blog.csdn.net/Guiyide/article/details/79105336

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title></title>
       <script type="text/javascript" src="js/angular.js" ></script>
       <script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
       <style>
           #nameid{
               border-radius: 10px;
           }
           #addressid{
               border-radius: 10px;
           }
           table tr:nth-child(even){
               background-color: aqua;
           }


       </style>
       <script>

           var app = angular.module("myapp",[]);

           app.controller("mycontr",function($scope){
               var date1 = new Date("2017-9-01 10:10:10");
               var date2 = new Date("2017-1-02 10:10:10");
               var date3 = new Date("2017-1-03 10:10:10");
               $scope.namejia="";
               $scope.numjia="";
               $scope.pricejia="";
               $scope.addressjia="";
               $scope.plays=false;
               $scope.xiabiao;
               $scope.che;
               $scope.xianshi = false;
               $scope.danjiayo = "";

               $scope.goods = [{
                   name:"云南白药",
                   num:100,
                   address:"云南",
                   price:19.9,
                   fahuolama:false,
                   shuang:true,
                   tufa:false,
                   date:date1
               },{
                   name:"999感冒灵",
                   num:30,
                   address:"北京",
                   price:12.5,
                   shuang:true,
                   tufa:false,
                   fahuolama:false,
                   date:date2
               },{
                   name:"感康",
                   num:20,
                   address:"河北",
                   price:16.6,
                   fahuolama:true,
                   shuang:true,
                   tufa:false,
                   date:date3
               }];



               $scope.getruku = function(){
                   $scope.plays = !$scope.plays;
               }


               $scope.gettianjia = function(){
                   var good = {
                       name:$scope.namejia,
                       num:$scope.numjia,
                       address:$scope.addressjia,
                       price:$scope.pricejia,
                       tufa:false,
                       date:new Date()
                   }
                   $scope.goods.push(good)
                   $scope.plays = !$scope.plays;
               }
               $scope.zongji = function(){
                   var zong = 0;
                   for(zo in $scope.goods){
                       zong += $scope.goods[zo].price*$scope.goods[zo].num;
                   }
                   return zong;
               }


               $scope.getshanchu = function(names){

                   for (var i = 0; i < $scope.goods.length; i++) {
                       if($scope.goods[i].name == names){
                           if(window.confirm("确定要删？")){
                               $scope.goods.splice(i,1);
                               alert("删啦");
                           }else{
                               alert("没删");
                           }
                       }
                   }
               }

               $scope.getxiugai = function($index){
                   $scope.xiabiao = $index;
                   $scope.plays = !$scope.plays;
               }
               $scope.xiugai = function(){
                   index = $scope.xiabiao;
                   for (var i = 0; i < $scope.goods.length; i++) {
                       if($scope.goods[i].name==index){
                           $scope.goods[i].name = $scope.namejia;
                           $scope.goods[i].price = $scope.pricejia;
                           $scope.goods[i].address = $scope.addressjia;
                           $scope.goods[i].num = $scope.numjia;
                           alert("改好啦");
                           $scope.plays = !$scope.plays;
                       }

                   }
               }

               $scope.getjia = function($index){
                   $scope.goods[$index].num--;

               }
               $scope.getjiajia = function($index){
                   $scope.goods[$index].num++;

               }

               $scope.getcheckbox = function(){
                   for (var i = 0; i < $scope.goods.length; i++) {
                       $scope.goods[i].tufa = $scope.che;
                   }
               }
               $scope.getpiliang = function(){
                   for (var i = 0; i < $scope.goods.length; i++) {
                       if ($scope.goods[i].tufa) {
                           $scope.goods.splice(i,1);
                           i--;
                       }
                   }
                   $scope.che = false;
               }
               $scope.getfahuo = function($index){
                   for (var i = 0; i < $scope.goods.length; i++) {
                       if($scope.goods[i].name==$index){
                           $scope.goods[i].fahuolama=true;
                       }

                   }
               }

           });

       </script>

   </head>
   <body ng-app="myapp" ng-controller="mycontr">
       <center>
           <h3>商品小存库</h3>
           <input type="text" id="nameid" ng-model="chaname" placeholder="请输入查询name关键字" />
           <input type="text" id="addressid" ng-model="dishi" placeholder="请输入查询产地关键字" />
           <select ng-model="pai">
               <option value="">
                   排序
               </option>
               <option value="date">
                   按时间正序
               </option>
               <option value="-date">
                   按时间倒序
               </option>
               <option value="price">
                   按单价正序
               </option>
               <option value="-price">
                   按单价倒序
               </option>
               <option value="num">
                   按数量正序
               </option>
               <option value="-num">
                   按数量倒序
               </option>
           </select>
           <input type="button" value="入库" ng-click="getruku()" />
           <input type="button" value="批量删除" ng-click="getpiliang()" />

       <table style="width: 800px;" border="1px" cellpadding="0px" cellspacing="0px">
           <tr style="background-color: cadetblue;">
               <td><input type="checkbox" ng-click="getcheckbox()" ng-model="che" /></td>
               <td>name</td>
               <td>price</td>
               <td>num</td>
               <td>产地</td>
               <td>时间</td>
               <td>小计</td>
               <td>操作</td>
               <td>状态</td>
           </tr>
           <tr ng-repeat="g in goods | filter:{name:chaname,address:dishi} | orderBy:pai ">
               <td><input type="checkbox" ng-model="g.tufa" /> </td>
               <td>{{g.name}}</td>
               <td ng-dblclick="g.shuang=false">
                   <span ng-show="g.shuang">{{g.price}}</span>
                   <input type="text" ng-hide="g.shuang" ng-model="g.price" ng-blur="g.shuang=true" />
               </td>
               <td><input type="button" value="-" ng-click="getjia($index)" /> 
                   {{g.num}}
                   <input type="button" value="+" ng-click="getjiajia($index)" /> </td>
               <td>{{g.address}}</td>
               <td>{{g.date | date:"yyyy-MM-dd hh:mm:ss"}}</td>
               <td>{{g.price*g.num |number:2}}</td>
               <td><input type="button" value="删除" ng-click="getshanchu(g.name)" /> 
                   <input type="button" value="修改" ng-click="getxiugai(g.name)" /> </td>
               <td><input type="button" value="未发货" ng-show="!g.fahuolama" ng-click="getfahuo(g.name)" />
                   <input type="button" value="已发货" ng-show="g.fahuolama" />
               </td>
           </tr>
       </table>
       <h4>总计：{{zongji()}}</h4>
       <p ng-show="plays">
           <input type="text" placeholder="请输入name" ng-model="namejia" /><br />
           <input type="number" placeholder="请输入price" ng-model="pricejia" /><br />
           <input type="number" placeholder="请输入num" ng-model="numjia" /><br />
           <input type="text" placeholder="请输入address" ng-model="addressjia" /><br />
           <input type="button" value="添加" ng-click="gettianjia()" />
           <input type="button" value="修改" ng-click="xiugai()" />
       </p>




       </center>
   </body>
</html>