购物车:增删改插，隔行换色

于 2017-11-22 19:06:09 发布
阅读量289 收藏
点赞数
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/nyf19980311/article/details/78607021
<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <script type="text/javascript" src="../js/angular.js" ></script>
  <style>
    <style>
        *{
            margin: auto;
            padding: 0;
        }
        body{
            text-align: center;
            margin: 50px auto;
        }
        table
        {
            margin-top: 30px;
            background: #FFFF00;
        }
        .btn
        {
            background: #FFC909;
            width: 100px;
            height: 50px;
        }
        tr:nth-child(2n){
            background: #00FFFF;
        }
  ul li{
    list-style: none;
    }
  </style>
  <script>
   var app = angular.module("myApp",[]);
   app.controller("myCtrl",function($scope){
    $scope.products = [{
     "id":30,
     "name":"iPhone",
     "price":5400,
     state:false
    }, {
     "id": 1200,
     "name": "ipad mini",
     "price": 2200,
     state: false
    }, {
     "id": 500,
     "name": "ipad air",
     "price": 2340,
     state: false
    }, {
     "id": 290,
     "name": "ipad",
     "price": 1420,
     state: false
    }, {
     "id": 910,
     "name": "imac",
     "price": 15400,
     state: false
    }];
    //查询
    $scope.search = "";
    
    
    //下拉菜单过滤商品价格范围
    $scope.productPrice = "--请选择--";
    $scope.isShow = function(price){
     if ($scope.productPrice=="--请选择--") {
      return true;
     }else{
      var priceArr = $scope.productPrice.split("-");
      var min=priceArr[0];
      var max=priceArr[1];
      if (price<min||price>max) {
       return false;
      }else{
       return true;
      }
     }
    }
    //全选反选
    $scope.selectAll = false;
    $scope.selectAllFun = function(){
     if ($scope.selectAll) {
      for (index in $scope.products) {
       $scope.products[index].state = true;
      }
     } else{
      for (index in $scope.products) {
       $scope.products[index].state = false;
      }
     }
    }
    //全不选
    $scope.checkSelectAll=function(){
     var a = 0;
     for (index in $scope.products) {
      if (!$scope.products[index].state) {
       $scope.selectAll = false;
      } else{
       a++;
      }
      if (a==$scope.products.length) {
       $scope.selectAll=true;
      } else{
       $scope.selectAll = false;
      }
     }
    }
    
    //批量删除
    $scope.delSelect = function(){
     var arr = [];
     for (index in $scope.products) {
      if ($scope.products[index].state) {
       arr.push($scope.products[index].name);
      }
     }
     if (arr.length<=0) {
      alert("请先选择删除项")
     }else{
      if (window.confirm("确定删除吗?")) {
       for (index in arr) {
        for (index2 in $scope.products) {
         if (arr[index]==$scope.products[index2].name) {
          $scope.products.splice(index2,1);
         }
        }
       }
       
      }
     }
    }
    //新增商品
    $scope.formShow = false;
    $scope.formShowFun = function(){
     if ($scope.formShow) {
      $scope.formShow = false;
     } else{
      $scope.formShow = true;
      $scope.updateShow = false;
     }
    }
    //提交新加商品进行验证
    $scope.newId = "";
    $scope.newName="";
    $scope.newPrice="";
    $scope.checkSub=[];
    $scope.divShow = false;
    $scope.sub = function(){
     $scope.checkSub = [];
     if ($scope.newId=="" || $scope.newId==null) {
      $scope.checkSub.push("产品编号为空");
     } else if(isNaN($scope.newId)){
      $scope.checkSub.push("产品编号不是整数");
     }
     if ($scope.newName=="" || $scope.newName ==null) {
      $scope.checkSub.push("产品名称不能为空");
     }
     if ($scope.newPrice=="" || $scope.newPrice==null) {
      $scope.checkSub.push("产品价格为空");
     }else if(isNaN($scope.newPrice)){
      $scope.checkSub.push("产品价格不是整数");
     }
     if ($scope.checkSub.length>0) {
      $scope.divShow = true;
     } else{
      if (window.confirm("确定提交吗?")) {
       $scope.divShow = false;
       var newPro = {
        "id":parseInt($scope.newId),
        "name":$scope.newName,
        "price":parseInt($scope.newPrice),
        state:false
       };
       $scope.products.push(newPro);
       $scope.formShow = false;
      }
      
     }
    }
    
    //修改
    $scope.updateShow = false;
    $scope.updateId = "";
    $scope.updateName = "";
    $scope.updatePrice = "";
    $scope.updateShowFun = function(pro) {
     $scope.updateShow = true;
     $scope.formShow = false;
     $scope.updateId = pro.id;
     $scope.updateName = pro.name;
     $scope.updatePrice = pro.price;
    }
    $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.haha = true;
     } else {
      $scope.haha = false;
      for(index in $scope.products) {
       if(parseInt($scope.updateId) == $scope.products[index].id) {
        $scope.products[index].name = $scope.updateName;
        $scope.products[index].price = $scope.updatePrice;
        $scope.updateShow = false;
       }
      }
     }
    }
   });
  </script>
 </head>
 <body ng-app="myApp" ng-controller="myCtrl">
  <center>
   <h3>购物车</h3>
   <input type="text" size="10" placeholder="产品名称" ng-model="search"/>产品价格
   <select ng-model="productPrice">
    <option>--请选择--</option>
    <option>0-2000</option>
    <option>2001-3000</option>
    <option>3001-4000</option>
    <option>4001-5000</option>
    <option>5001-6000</option>
    <option>6001-7000</option>
    <option>7001-8000</option>
    <option>8001-无穷大</option>
   </select>
   <select ng-model="selOrder">
    <option value="">排序方式</option>
    <option value="id">id正序</option>
    <option value="-id">id逆序</option>
    <option value="price">价格正序</option>
    <option value="-price">价格逆序</option>
   </select>
   <button ng-click="delSelect()">批量删除</button>
   <br /><br />
   <table border="1px solid blue" cellpadding="10" cellspacing="0">
    <thead>
     <tr>
      <th><input type="checkbox" ng-model="selectAll" ng-click="selectAllFun()"/></th>
      <th>产品编号</th>
      <th>产品名称</th>
      <th>产品价格</th>
      <th>操作</th>
     </tr>
    </thead>
    <tbody>
     <tr ng-repeat="pro in products | filter:{'name':search} | orderBy:selOrder" ng-show="isShow(pro.price)">
      <td><input type="checkbox" ng-model="pro.state" ng-click="checkSelectAll()"/></td>
      <td>{{pro.id}}</td>
      <td>{{pro.name}}</td>
      <td>{{pro.price | currency:"￥:"}}</td>
      <td>
       <button>删除</button>
       <button ng-click="updateShowFun(pro)">修改</button>
      </td>
     </tr>
    </tbody>
   </table><br />
   <button ng-click="formShowFun()">添加新产品</button><br /><br />
   <form style="border: 1px solid blue; width: 300px;" ng-show="formShow">
    <h3>添加商品</h3>商品编号:
    <input type="text" placeholder="商品编号" ng-model="newId"/><br /><br />商品名称:
    <input type="text" placeholder="商品名称" ng-model="newName"/><br /><br />商品价格:
    <input type="text" placeholder="商品价格" ng-model="newPrice"/>
    <div style="border: 1px solid blue; width: 250px; background-color: pink;" ng-show="divShow">
     <ul>
      <li ng-repeat="chenk in checkSub">{{chenk}}</li>
     </ul>
    </div><br />
    <input type="button" value="提交" ng-click="sub()" />
    
   </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="text" placeholder="商品价格" ng-model="updatePrice" /><br /><br />
    <div style="border: 1px solid blue; width: 250px; background-color: pink;" ng-show="haha">
     <ul>
      <li ng-repeat="chenk in updateArr">{{chenk}}</li>
     </ul>
    </div><br />
    <input type="button" value="提交" ng-click="updateSub()" />
   </form>
  </center>
 </body>
</html>
nyf19980311
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值