Anglur 增删改查

最新推荐文章于 2024-05-02 16:26:38 发布

hey-solur

最新推荐文章于 2024-05-02 16:26:38 发布

阅读量464

点赞数 1

本文链接：https://blog.csdn.net/air_show/article/details/79072642

版权

<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <style>
           tbody tr:nth-child(even){
               background-color: aliceblue;
           }
           tbody tr:nth-child(odd){
               background-color: lightpink;
           }
           .qq{
               margin: auto;
                 align-content: center;
               width: 1000px;
               height: 300px;
           }
       </style>
       <script type="text/javascript" src="../js/angular.js" ></script>
       <script>
           var app=angular.module("myApp",[]);
           app.controller("myCtrl",function($scope){
               $scope.products=[{id:1,sname:"雪糕",uname:"",tell:15083046429,num:2,price:10,citys:"安阳",regDate:new Date(),ztai:"未发货"},{
                   id:2,sname:"奶茶",uname:"冯贱贱",tell:13083046429,num:3,price:2,citys:"邯郸",regDate:new Date(),ztai:"未发货"},{
                   id:3,sname:"棒棒糖",uname:"疯子李",tell:18083046429,num:5,price:50,citys:"陕西",regDate:new Date("2017-4-5"),ztai:"未发货"},{
                   id:4,sname:"辣条",uname:"张亚楠",tell:13483046429,num:9,price:30,citys:"山谷",regDate:new Date(),ztai:"未发货"
               }]
               //搜素
               $scope.search="";
               //删除
               $scope.delProduct=function(clumn){
                   var arr=[];
                   if(confirm("你确定删除，吗")){
                       for (index in $scope.products) {
                           if($scope.products[index].id==clumn){
                               $scope.products.splice(index,1);
                           }
                       }
                   }
               }
               //批量删除
               $scope.isShow=false;
               $scope.delete=function(){
                   if(confirm("您确定删除吗")){
                       for (var i=0;i<$scope.products.length;i++) {
                           if($scope.products[i].state==true){
                               $scope.products.splice(i,1);
                               i--;
                           }
                       }
                       if($scope.products.length==0){
                           $scope.isShow=true;
                       }
                   }
               }
               //添加
               $scope.tj=function(){
                   var ss=/雪/g;
                   var pro={
                       id:$scope.add_id,
                       sname:$scope.add_sname.replace(ss,"*"),
                       uname:$scope.add_uname,
                       tell:$scope.add_tell,
                       num:$scope.add_num,
                       price:$scope.add_price,
                       citys:$scope.add_citys,
                       regDate:new Date(),
                       ztai:$scope.add_ztai
                   }
                   $scope.products.push(pro);
                   $scope.add_id="";
                   $scope.isshow=false;
               }
               //全选
               $scope.select=function(){
                   for (var i in $scope.products) {
                       $scope.products[i].state=$scope.selectAll;
                   }
               }
               //手机号搜素
               $scope.sou="";
               //总金额
               $scope.allprice=function(){
                   $scope.all=0;
                   for (index in $scope.products) {
                       $scope.all=$scope.products[index].price * $scope.products[index].num + $scope.all;

                   }
                   return $scope.all;
               }
               //减一
               $scope.less=function(id){
                   for (index in $scope.products) {
                       if($scope.products[index].id==id){
                           if($scope.products[index].num>1){
                               $scope.products[index].num--;
                           }else{
                               if(confirm("您确定删除啊吗")){
                                   $scope.products.splice(index,1);
                               }
                           }
                       }
                   }
               }
               //批量发货
               $scope.pf = function() {
                       for(var i = 0; i < $scope.products.length; i++) {
                           if($scope.products[i].state) {
                               $scope.products[i].ztai = '已发货';
                           }
                       }
                   }
               //月份
               $scope.yue=function(regdate){
                   var ks=$scope.startyue;
                   var js=$scope.endyue;
                   if(ks==undefined||ks==""){
                       ks=1;
                   }
                   if(js==undefined||js==""){
                       js=12;
                   }
                   console.log(ks,js);
                   var m= regdate.getMonth()+1;
                   if(m>=ks&&m<=js){
                       return true;
                   }
                   return false;

               }
               //添加

           });
       </script>
   </head>
   <body ng-app="myApp" ng-controller="myCtrl">
       <div class="qq">
           <center>
       <h1>我的商品状态</h1>
       </center>
       <input placeholder="请输入用户名称" ng-model="search"/>
       <input placeholder="手机号搜索" ng-model="sou">
       <select ng-model="citys">
           <option value="">选择城市</option>
           <option>安阳</option>
           <option>邯郸</option>
           <option>陕西</option>
       </select>
       <select ng-model="ftcx">
         <option value="">选择发货状态</option>
         <option>未发货</option>
         <option>已发货</option>
       </select>
       <select ng-model="startyue">
           <option value="">开始月份</option>
           <option>1</option>
           <option>2</option>
           <option>3</option>
           <option>4</option>
           <option>5</option>
           <option>6</option>
           <option>7</option>
           <option>8</option>
           <option>9</option>
           <option>10</option>
           <option>11</option>
           <option>12</option>
       </select>
       <select ng-model="endyue">
               <option value="">结束月份</option>
           <option>1</option>
           <option>2</option>
           <option>3</option>
           <option>4</option>
           <option>5</option>
           <option>6</option>
           <option>7</option>
           <option>8</option>
           <option>9</option>
           <option>10</option>
           <option>11</option>
           <option>12</option>
       </select>
       <select ng-model="idpx">
          <option value="">ID排序</option>
            <option value="+id">id正序</option>
          <option value="-id">id降序</option>
       </select><br />
       <button ng-click="delete()" style="background-color: orangered">批量删除</button>
       <button ng-click="pf()" style="background-color: aquamarine;">批量发或</button>
       <button ng-click="isshow=true" style="background-color: greenyellow">新增订单</button>敏感字：雪换成*<br />
       <table border="1" cellspacing="0">
           <thead>
               <tr>
                   <th><input type="checkbox" ng-model="selectAll" ng-click="select()"></th>
                   <th>id</th>
                   <th>sname</th>
                   <th>uname</th>
                   <th>tell</th>
                   <th>num</th>
                   <th>price</th>
                   <th>total</th>
                   <th>citys</th>
                   <th>regDate</th>
                   <th>ztai</th>
                   <th>option</th>
                     <th>option</th>
               </tr>
           </thead>
           <tbody>
               <tr ng-repeat="pro in products | filter:{sname:search} |filter:{tell:sou} | filter:{citys:citys} | filter:{ztai:ftcx} | orderBy:idpx" ng-show="yue(pro.regDate)">
                   <td><input type="checkbox" ng-model="pro.state"></th>
                   <td>{{pro.id}}</td>
                   <td>{{pro.sname}}</td>
                   <td>{{pro.uname}}</td>
                   <td>{{pro.tell}}</td>
                   <td>
                       <button ng-click="less(pro.id)">-</button>
                       {{pro.num}}
                       <button ng-click="pro.num=pro.num+1">+</button>
                   </td>
                   <td><span ng-hide="xg">{{pro.price | currency:"￥"}}</span><span ng-show="xg"><input type="text" ng-model="pro.price"><button ng-click="xg=false">保存</button></span></td>
                   <td>{{pro.price * pro.num}}</th>
                   <td><span ng-hide="xg">{{pro.citys}}</span><span ng-show="xg"><input type="text" ng-model="pro.citys"><button ng-click="xg=false">保存</button></span></td>
                   <td>{{pro.regDate | date:'MM-dd hh:mm'}}</td>
                   <td>
                       <span ng-if="pro.ztai=='未发货'">
                       <a href="#" ng-click="pro.ztai='已发货'">{{pro.ztai}} </a>
                       </span>
                       <span ng-if="pro.ztai=='已发货'">
                           已发货
                       </span>

                       </td>
                   <td><button ng-click="xg=true">修改</button></td>
                     <td><button ng-click="delProduct(pro.id)">删除</button></td>
               </tr>
               <tr>
                   <td colspan="13" align="center">总金额：<span ng-bind="allprice()"></span></td>
               </tr>
           </tbody>
       </table>
       <p ng-show="isShow">购车已空</p>
       <div id="add" ng-show="isshow">
           <input placeholder="请输入id" ng-model="add_id"/><br />
           <input placeholder="请输入商品名称" ng-model="add_sname"/><br />
           <input placeholder="请输入用户名" ng-model="add_uname"/><br />
           <input placeholder="请输入电话" ng-model="add_tell"/><br />
           <input placeholder="请输入数量" ng-model="add_num"/><br />
           <input placeholder="请输入价格" ng-model="add_price"/><br />
           <input placeholder="请输入城市" ng-model="add_citys"/><br />
           <input placeholder="请输入状态" ng-model="add_ztai"/><br />
     <button ng-click="tj()">提交</button>
       </div>
       </div>

   </body>
</html>