基础的操作增删改查

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title></title>
  <title>购物车操作</title>
  <style>
   table tr:nth-child(even) {
    background-color: lightgray;
   }

   tr button {
    width: 30px;
   }
  </style>
  <script src="js/angular.min.js"></script>
  <script src="js/jquery-3.2.1.min.js"></script>
  <script>
   var app = angular.module("App",[]);
   app.controller("con",function($scope){
    $scope.stus = [];

    //添加
    $scope.add = function() {

      var good = {
       uname: $scope.name,
       utype: $scope.typee,
       uprice: $scope.price,
       ucount: $scope.count
      };
      $scope.stus.push(good);

    }

    //清空
    $scope.empty = function(){
     $scope.stus = [];
    }

    //del代表删除按钮
    //删除弹框是否删除如果是就删
    $scope.del = function(e) {
     // 判断是否删除

for(var i in $scope.stus) {
if($scope.stus[i].uname == e) {

       if(confirm("确认删除吗？")) {
        $scope.stus.splice(i, 1);
        i--;
       }
      }
     }
    }

    //都删
    $scope.ckAll = function(){
     for(var i=0; i<$scope.stus.length;i++){
      $scope.stus[i].ck = $scope.xuan;
     }
    }
    $scope.duo = function(){
     var sh=0;
     for(var i = 0; i < $scope.stus.length; i++) {
                        if($scope.stus[i].ck) {
                           $scope.stus.splice(i, 1);
                           sh++;
                           i--;
                          }
                       }
    }
    //加减操作
    $scope.num = function(cc,i){
     if($scope.stus[i].ucount>=1){
      $scope.stus[i].ucount = $scope.stus[i].ucount+cc;
     }else{
      $scope.stus.splice(i, 1);
     }
    }
    //总数
    $scope.shu = function(){
     var zo = 0;
     for(var i in $scope.stus){
      zo = zo+$scope.stus[i].ucount;
     }
     return zo;
    }

    //总价
    $scope.sum = function(){
     var zong = 0;
     for(var z in $scope.stus){
      zong = zong + $scope.stus[z].uprice * $scope.stus[z].ucount;
     }
     return zong;
    }

               //修改点击按钮
              $scope.xiu1 = function(name){
              for(var i in $scope.stus){
                if($scope.stus[i].uname == name){
                  $scope.name2 = $scope.stus[i].uname;
                 $scope.price2 = $scope.stus[i].uprice;
                 $scope.count2 = $scope.stus[i].ucount;
                 $scope.type2 = $scope.stus[i].utype;
                }

              }
              $scope.fsf = true;
              }

              //修改完的点击按钮
              $scope.xiu2 = function(){
              var reg_=/米/g;
                    var n_uname=$scope.name2.replace(reg_,"*") ;
                        var n_count=$scope.count2;
                        var n_type=$scope.type2;
                        var n_price=$scope.price2;

                      for(var i = 0; i < $scope.stus.length; i++){
                        if($scope.stus[i].uname==n_uname){
                                $scope.stus[i].uname=n_uname;
                                $scope.stus[i].uprice=n_price;
                                $scope.stus[i].utype=n_type;
                                $scope.stus[i].ucount=n_count;
                            }

                          }
                        $scope.fsf = false;
                       }

              //添加
              $scope.insert=function(m){
                    var good={uname:$scope.tname,utype:$scope.ttype,uprice:$scope.tprice,ucount:$scope.tcount};
                    $scope.stus.push(good);
                }

   });




  </script>
</head>
<body ng-app="App" ng-controller="con">
  模糊查询：<input ng-model="*"/>
  用户名：<input ng-model="name"/>
  类型：<input ng-model="typee"/>
  价格：<input type="number" ng-model="price"/>
  数量：<input type="number" ng-model="count"/>
  <select ng-model="souprice">
                <option value="">价格排序</option>
               <option value="+uprice">价格正序</option>
                <option value="-uprice">价格倒序</option>
            </select>
  <button ng-click="add()">添加</button>

  <table width="900" border="1" cellspacing="0">
   <tr style="background-color: lightslategray;">
    <th><input type="checkbox" ng-click="ckAll()" ng-model="xuan"/></th>
    <th>用户名</th>
    <th>类型</th>
    <th >价格</th>
    <th >数量</th>
    <th>小计</th>
    <th>操作</th>
   </tr>

<tr ng-repeat="a in stus | filter : {uname:*}| orderBy : souprice">
    <td><input type="checkbox" ng-model="a.ck"/></td>
    <td>{{a.uname}}</td>
    <td>{{a.utype}}</td>
    <td>{{a.uprice}}</td>
    <td><button ng-click="num(-1,$index)">-</button>
     <input style="width: 30px;" ng-model="a.ucount" />

<button ng-click="num(1,$index)">+</button></td>
    <td>{{a.uprice*a.ucount}}</td>

    
    <td><button ng-click="del(a.uname)" style="width: 70px; height: 30px; background-color: royalblue;">删除</button>
     <button ng-click="xiu1(a.uname)" style="width: 70px; height: 30px; background-color: aquamarine">修改</button>
    </td>
   </tr>
  </table>
  <p style="margin-left: 600px;">总计：{{sum()}}</p>
  <p style="margin-left: 600px;">数量：{{shu()}}</p>

  <div>
   <button ng-click="empty()" style="width: 70px; height: 30px; background-color: aquamarine">清空</button>
   <button ng-click="duo()" style="width: 70px; height: 30px; background-color: aquamarine">批量删除</button>
  </div>


  
            <button style=" background-color: #008000; margin: 6px; color: #FFFFFF;" ng-click="m=true">新增用户</button>
            <div style="width: 1000px;border: 1px solid greenyellow;" ng-show="m">
                　　
                用户名:<input ng-model="tname"/>　
                价格:<input type="number" ng-model="tprice"/>　
                   数量:<input type="number" ng-model="tcount"/>　
                   类型:<input ng-model="ttype"/>
                <button ng-click="insert(m=false)">添加</button>
            </div>


  
  <div style="width: 180px;border: 1px solid #000000; height: 250px; margin-left: 490px;" ng-show="fsf">
                <div style="margin: 0 auto;">
                    <h2 style="margin-left: 30px;">修改商品</h2>
                    <input placeholder="用户名" ng-model="name2" />
                    <input placeholder="价格 " ng-model="price2 "/>
                    <input placeholder="数量 " ng-model="count2" />
                    <input placeholder="类型" ng-model="type2" /><br />
                <button ng-click="xiu2()">修改</button>
            </div>
            </div>
</body>
</html>

秒客网

基础的操作增删改查

相关文章