angularjs实现购物车增删改查，模糊查询

最新推荐文章于 2022-07-30 11:44:59 发布

w4270724

最新推荐文章于 2022-07-30 11:44:59 发布

阅读量234

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/w4270724/article/details/79419636

版权

HTML 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html ng-app="App">
<head>
  <meta charset="UTF-8">
  <title></title>


  <style>

   .css1{
    background-color: red;
   }

   .css2{

    background-color: blue;
   }
  </style>
</head>
<body ng-controller="Democtrl">



  <div>
   <input type="text" placeholder="请输入查询的商品" ng-model="search"/>
   数量排序:
   <select ng-model="numsBy">
    <option value="numss">数量正序</option>
    <option value="-numss">数量倒序</option>

   </select>

   <button ng-click="deleteAll()">批量删除</button>

  </div>

  <table border="2">

   <tr>
    <td><input type="checkbox" ng-click="selectAll()"/></td>
    <td>产品编号</td>
    <td>产品名称</td>
    <td>购买数量</td>
    <td>产品单价</td>
    <td>产品总价</td>
    <td>操作</td>

   </tr>


   <tr ng-repeat="x in Product | filter:{name:search} | orderBy:numsBy" class="{{$even ? 'css1':'css2'}}">

    <td><input type="checkbox" ng-model="x.state"/></td>
    <td>{{x.id}}</td>
    <td>{{x.name}}</td>
    <td>
     <button ng-click="jian($index)">-</button>
     <input type="number" ng-model="x.numss">
     <button ng-click="add($index)">+</button>

    </td>
    <td>{{x.price}}</td>
    <td>{{x.price*x.numss}}</td>
    <td>
     <button ng-click="remove($index)">删除</button>
    </td>

    <td>
     <button ng-click="xiugai($index)">修改</button>
    </td>

   </tr>

  </table>

  <div>
   <span>总价</span>
   <span>{{totalPrices()}}</span>

   <span>数量</span>
   <span>{{numAll()}}</span>

   <button ng-click="removeAll()">清空</button>

  </div>


    <form style="border: 1px solid yellow; width: 260px;">

     商品编号:<input type="text" ng-model="ID"/><br />
     商品名称:<input type="text" ng-model="IDname"/><br />
     商品数量:<input type="number" ng-model="IDnum"/><br />
     商品单价:<input type="text" ng-model="IDprice"/><br />

     <button ng-click="add333()">添加</button>

    </form>


    <form style="border: solid black; width: 300px;" ng-show="updateShow">
     商品编号:<input type="text" ng-model="updateId"/><br />
     商品名称:<input type="text" ng-model="updateName"/><br />
     商品数量:<input type="num" ng-model="updateNum"/><br />
     商品编号:<input type="text" ng-model="updatePrice"/><br />
     <button type="button" value="提交" ng-click="updateSub()">提交</button>

    </form>



  <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>

  <script>
   var App = angular.module("App",[]);

   App.controller("Democtrl",function($scope){

    //给Product定义数据
     $scope.Product = [{
                id: 1000,
                name: "iPhone8",
                numss: 1,
                price: 8888,
                state:false
            }, {
                id: 1001,
                name: "iPhone9",
                numss: 1,
                price: 9888,
                state:false

            }, {
                id: 1002,
                name: "iPhone 2s",
                numss: 1,
                price: 3888,
                state:false
            }, {
                id: 1003,
                name: "iPhone 7P+",
                numss: 1,
                price: 10088,
                state:false
            }];

            //减减的操作 $index angularjs自带的索引    0
            $scope.jian = function(index){
            //0
            if($scope.Product[index].numss>=1){
              $scope.Product[index].numss--;
            }else{
              //做删除
            }

            }


            //数量进行加加
            $scope.add = function(index){
            $scope.Product[index].numss++;
            }


            //删除
            $scope.remove = function(index){
            //0   1 index删除哪一个对像的索引
            //

            if(confirm("确定删除吗?")){
              $scope.Product.splice(index,1);
            }

            }


            //算总价   每一个对像的购买数量*单价相加
            $scope.totalPrices = function(){

            var totalPrices =0;

            for (var x=0;x<$scope.Product.length;x++) {
              //0      1 *8888   8888
              totalPrices+=$scope.Product[x].numss*$scope.Product[x].price;
            }

            return totalPrices;
            }

            //清空
            $scope.removeAll = function(){
            $scope.Product = [];
            }


            //数量的总合

            $scope.numAll = function(){
            var totalNum = 0;

            for (var x =0;x<$scope.Product.length;x++) {
              totalNum+=$scope.Product[x].numss;
            }

            return totalNum;

            }

            /


            //批量删除的

            $scope.deleteAll = function(){
            //默认空的数组
            var arr =[];
            //循环数组
            for (var x =0;x<$scope.Product.length;x++) {
              //如果状态是true的情况下，代表checkbox已经选中了
              if($scope.Product[x].state){

               arr.push($scope.Product[x].name);
              }

            }

            //如果说数给的长度为0，证明一个都没有选中
            if(arr.length<=0){
              confirm("请您选中之后再进行删除");
            }else{
              //说明数给的长度不为0，直接删除   ng-repeat ="x in 数组"
              for (index in arr) {
               for (index1 in $scope.Product) {

                if(arr[index]==$scope.Product[index1].name){
                 $scope.Product.splice(index1,1);
                }
               }
              }

            }

            }


            //进行添加的操作
            $scope.add333 = function(){
            //首先判断一下商品编号不能为空，商品编号要是数字类型

            if($scope.ID=="" || $scope.ID==null){
              alert("商品编号不能为空")

              return;
            }

            if(isNaN($scope.ID)){
              alert("商品编号必须是数字")

              return;
            }


            $scope.Product.push({
       id:$scope.ID,
       name: $scope.IDname,
       numss: $scope.IDnum,
       price: $scope.IDprice

      });


            };



            //修改的操作
            $scope.updateShow = false;
             var updateId="";
            var updateName ="";
            var updateNum ="";
            var updatePrice="";




            $scope.xiugai = function(index){
            if(confirm("确定要修改吗?")){
              $scope.updateShow = true;


              $scope.updateId = $scope.Product[index].id;
              $scope.updateName = $scope.Product[index].name;
              $scope.updateNum = $scope.Product[index].numss;
              $scope.updatePrice = $scope.Product[index].price;




            }
            }


            //提交的按钮
            $scope.updateSub = function(){

            /*if(){}*/

            //进行id的判断，如果id相等的情况下，我就进行删除的操作


        for (index in $scope.Product) {
         if($scope.updateId==$scope.Product[index].id){    //如果相等的情况下，进行数据的修改

          $scope.Product[index].name=$scope.updateName;

          $scope.Product[index].numss=$scope.updateNum;

          $scope.Product[index].price=$scope.updatePrice;


          $scope.updateShow = false;

              }
        }


            }




   });

  </script>
</body>
</html>