购物车(增删改插)

最新推荐文章于 2022-03-29 21:43:15 发布

nyf19980311

最新推荐文章于 2022-03-29 21:43:15 发布

阅读量368

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.csdn.net/nyf19980311/article/details/78575925

这是一个使用AngularJS编写的购物车应用示例。它实现了商品的增删改查功能，包括根据ID和价格排序，下拉菜单筛选价格区间，删除商品，更新商品价格，全选/全不选商品，反选以及批量删除等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <script type="text/javascript" src="../js/angular.js" ></script>
  <script>
   var app = angular.module("myApp",[]);
   app.controller("myCtrl",function($scope){
    $scope.products = [{
     "id": 80,
     "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.orderFlag = "";
    $scope.orderLine = "id";
    $scope.orderProduct = function(line) {
     $scope.orderLine = line;
     if($scope.orderFlag == "") {
      $scope.orderFlag = "-";
     } else {
      $scope.orderFlag = "";
     }
    }

    //下拉菜单删选商品价格、
    $scope.productPrice = "--请选择--";
    $scope.ifShow = function(price) {
     /*console.log(price +":"+ productPrice);
     return true;*/
     //alert(priceMin);
     if($scope.productPrice == "--请选择--") {
      return true;
     } else {
      var arr = $scope.productPrice.split("-");
      var priceMin = arr[0];
      var priceMax = arr[1];
      if(price < priceMin || price > priceMax) {
       //alert("111");
       return false;
      } else {
       return true;
      }
     }
    }

    //点击删除按钮，删除当前商品
    $scope.delProduct = function(delName) {
     //alert(delName);
     for(index in $scope.products) {
      //alert("删除前，角标为"+index+"长度为："+$scope.products.length);
      if(delName == $scope.products[index].name) {
       $scope.products.splice(index, 1);
       //alert("删除后，角标为"+index+"长度为："+$scope.products.length);
      } else {

      }
     }
    }

    //定义下拉菜单排序规则
    $scope.selOrder;
    $scope.orderSel = function() {
     if($scope.selOrder == "id") {
      $scope.orderFlag = "";
      $scope.orderLine = "id";s
     } else if($scope.selOrder == "-id") {
      $scope.orderFlag = "-";
      $scope.orderLine = "id";
     } else if($scope.selOrder == "price") {
      $scope.orderFlag = "";
      $scope.orderLine = "price";
     } else if($scope.selOrder == "-price") {
      $scope.orderFlag = "-";
      $scope.orderLine = "price";
     };
    }

    //定义修改价格
//    $scope.updatePrice = function(index){
//     //获得价格
//     var price = $scope.products[index].price;
//     var result = window.prompt("清输入要修改的价格",price);
//     alert(result);
//    }
    $scope.updatePrice = function(price) {
     //获得价格
     for(index in $scope.products) {
      //alert("删除前，角标为"+index+"长度为："+$scope.products.length);
      if(price == $scope.products[index].price) {
       //$scope.products.splice(index, 1);
       //alert("删除后，角标为"+index+"长度为："+$scope.products.length);
       //修改价格
       var result = parseInt(window.prompt("清输入要修改的价格", price));

       //在这之前对result的结果进行非字符串判断
       if(result < 0) {
        alert("输入有误，请重新更改");
       } else {
        if(window.confirm("确定要将" + $scope.products[index].name + "的价格更改为：" + result + "吗？")) {
         $scope.products[index].price = result;
        };
       }

} else {

      }
     }
    }
    //全选、全不选
    $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.checkSelecetAll = function() {
     var flag = false;
     //遍历数组，获得对象的状态
     for(index in $scope.products) {
      //alert($scope.products[index].state);
      //如果有一个对象状态是false即未选中状态，就把标志位flag变为true。
      if(!$scope.products[index].state){
       flag = true;
      }
     }
     //判断是否没有一个是未选中状态
     if(flag){//这是正面至少有一个未选中
      $scope.selectAll = false;//全选状态为false
     }else{//一定是全部被选中
      $scope.selectAll = true;//全选状态为true
     }
    }

    //批量删除
    $scope.delSelect = function(){
     //自己添加选中状态判断，就是有没有一个都没选中的情况。

     //定义一个空数组，盛放状态是选中的对象
     var isSelected = [];
     //遍历数组，通过数组对象的状态，判断是否删除当前遍历的对象
     for(index in $scope.products) {
      //如果遍历的当前对象状态为true，则删除
      if($scope.products[index].state){
       //把当前选中的对象，一个个追加到isSelected数组中。
       isSelected.push($scope.products[index]);
       //alert(isSelected.length);
      }
     }

     //遍历isSelected数组，因为isSelected数组中存放的是所有选中项的对象。
     for(index in isSelected){
      var name = isSelected[index].name;
      for(index2 in $scope.products){
       if(name == $scope.products[index2].name){
        $scope.products.splice(index2,1);
       }
      }
     }
    }

   });
  </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" ng-change="orderSel()">
    <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">
    <tr>
     <th><input type="checkbox" ng-model="selectAll" ng-click="selectAllFun()" /> </th>
     <th ng-click="orderProduct('id')">产品编号</th>
     <th ng-click="orderProduct('name')">产品名称</th>
     <th ng-click="orderProduct('price')">产品价格</th>
     <th>操作</th>
    </tr>
    <tr ng-repeat="sz in products | filter:{'name':search} | orderBy:(orderFlag+orderLine)" ng-if="ifShow(sz.price)">
     <td><input type="checkbox" ng-model="sz.state" ng-click="checkSelecetAll()" /> </td>
     <td>{{sz.id}}</td>
     <td>{{sz.name}}</td>
     <td>{{sz.price}}</td>
     <td>
      <button ng-click="delProduct(sz.name)">删除</button>
      <button ng-click="updatePrice(sz.price)">修改</button>
     </td>
    </tr>
   </table>

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