Angular购物车的完整版

最新推荐文章于 2019-06-11 15:57:18 发布

SXS120730

最新推荐文章于 2019-06-11 15:57:18 发布

阅读量541

点赞数

分类专栏： Angularjs

本文链接：https://blog.csdn.net/SXS120730/article/details/78298879

版权

Angularjs 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

cart.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../angular-1.5.5/angular.js"></script>
    <script src="cart.js"></script>
    <link rel="stylesheet" href="stlye.css">


</head>
<body ng-app="myapp" ng-controller="myCtrl">
<!--商品的添加-->
 <span>商品的类型：</span><input type="text" ng-model="nb"/> <span>商品的名称：</span><input type="text" ng-model="mc"/> <span>季节时期：</span><input type="text" ng-model="sq"/> <span>商品的价格：</span><input type="text" ng-model="jg"/>
  <button ng-click="addgoods()">添加商品</button>

<!--商品的分类-->
<ul>
    <li ng-repeat="item in data.categories">
        <input type="checkbox" ng-model="item.done" ng-click="gx()"/>
        <span>{{item.category}}</span>
    </li>
</ul>

<!--商品的展示-->
 <table class="tab">
     <tr ng-repeat="item in data.products|filter:ss"><!--过滤：商品是根据商品的分类进行展示的-->
         <td>
             <p>{{item.category+"             "+item.name}}</p>
             <img src="{{item.imgsrc}}"/>
         </td>
         <td>{{item.desc}}</td>
         <td>
             <p>{{item.price|currency:"￥"}}</p>
             <button ng-click="addcart($index)">添加到购物车中</button>
         </td>
     </tr>

 </table>

<!--商品在购物车的展示-->
<table >
    <tr>
        <th><input type="checkbox" ng-click="qx()" ng-model="dx"/>全选</th>
        <th>商品的名称</th>
        <th>商品的价格</th>
        <th>商品的数量</th>
        <th>商品的小计</th>
        <th>操作<button ng-click="delall()">批量删除</button></th>
    </tr>
    <tr ng-repeat="items in cart">
        <td><input type="checkbox" ng-model="items.done" ng-click="dj($index)"/></td>
        <td>{{items.name}}</td>
        <td>{{items.price}}</td>
        <td>{{items.num}}</td>
        <td>{{items.price*items.num}}</td>
        <td><button ng-click="del()">删除</button></td>
    </tr>
</table>


</body>
</html>

cart.js

/**
 * Created by shenxuesong on 2017/10/20.
 */
var myapp=angular.module("myapp",[]);
myapp.controller("myCtrl",function ($scope) {
    $scope.data={
        categories:[{id:"101",category:"商品01",done:false},
            {id:"102",category:"商品02",done:false},
            {id:"103",category:"商品03",done:false},
            {id:"103",category:"商品04",done:false}],
        //商品明细
        products:[
            {category:"商品01",name:"鼠标",desc:"2016春季爆款",price:"101",imgsrc:"images/TB1_50x50.jpg",done:false},
            {category:"商品01",name:"键盘",desc:"2016夏季爆款",price:"601",imgsrc:"images/TB2_50x50.jpg",done:false},
            {category:"商品01",name:"显示器",desc:"2016春季爆款",price:"101",imgsrc:"images/TB1_50x50.jpg",done:false},
            {category:"商品01",name:"硬盘",desc:"2016夏季爆款",price:"601",imgsrc:"images/TB2_50x50.jpg",done:false},
            {category:"商品02",name:"主机",desc:"2015春季爆款",price:"101",imgsrc:"images/TB1_50x50.jpg",done:false},
            {category:"商品02",name:"显示器",desc:"2016春季爆款",price:"101",imgsrc:"images/TB1_50x50.jpg",done:false},
            {category:"商品02",name:"硬盘",desc:"2016夏季爆款",price:"601",imgsrc:"images/TB2_50x50.jpg",done:false},
            {category:"商品02",name:"音响",desc:"2015夏季爆款",price:"601",imgsrc:"images/TB2_50x50.jpg",done:false},
            {category:"商品03",name:"主机",desc:"2015春季爆款",price:"101",imgsrc:"images/TB1_50x50.jpg",done:false},
            {category:"商品03",name:"音响",desc:"2015夏季爆款",price:"601",imgsrc:"images/TB2_50x50.jpg",done:false},
            {category:"商品04",name:"插线板",desc:"2013夏季爆款",price:"601",imgsrc:"images/TB2_50x50.jpg",done:false},
            {category:"商品04",name:"主机",desc:"2015春季爆款",price:"101",imgsrc:"images/TB1_50x50.jpg",done:false},
            {category:"商品04",name:"音响",desc:"2015夏季爆款",price:"601",imgsrc:"images/TB2_50x50.jpg",done:false},
        ]
    };

    //定义输入框的内容
    $scope.nb="";
    $scope.mc="";
    $scope.sq="";
    $scope.jg="";
    //添加商品的点击事件
    $scope.addgoods=function () {
        $scope.data.products.push( {category:$scope.nb,name: $scope.mc,desc:$scope.sq,price:$scope.jg,imgsrc:"images/TB1_50x50.jpg",done:false});
    }

    //判断只能勾选一个
      $scope.gx=function () {
          var n=0;
          var j=0;
          for(var i=0;i<$scope.data.categories.length;i++){
              if($scope.data.categories[i].done==true){
                  n++;
                  j=i;
              }
          }
          //如果n等于零说明没有勾选
          if(n==0){
             alert("您还没有勾选！！")
          }
          else
              if(n==1){
                  alert("您勾选了"+(j+1));
                  $scope.ss=$scope.data.categories[j].category;//过滤勾选的元素
              }
           else
              if(n>1){
                  alert("您勾选了"+(j+1));
              }

      };

    //点击添加到购物车的事件
      $scope.cart=[];//定义一个购物车

    $scope.addcart=function (index) {
          $scope.has=false;
       for(var i=0;i<$scope.cart.length;i++){
           if( $scope.cart[i].name==$scope.data.products[index].name){
               $scope.cart[i].num++;
               $scope.has=true;
               break;
           }else {
               $scope.has=false;
           }
       }
        if($scope.has==false){
           $scope.cart.unshift({name:$scope.data.products[index].name,price:$scope.data.products[index].price,num:1,done:false});
        }
    }

    //进行全选的操作
    $scope.dx=false;
    $scope.qx=function () {
        //判断如果全选勾选了，就让每个元素都进行勾选
        if( $scope.dx==true){
            for(var i=0;i<$scope.cart.length;i++){
                 $scope.cart[i].done=true;
            }
        }else{
            for(var i=0;i<$scope.cart.length;i++){
                $scope.cart[i].done=false;
            }
        }
    }
    //进行反判断
     $scope.dj=function (index) {
         for(var i=0;i<$scope.cart.length;i++){
             if($scope.cart[i].done==true){
                 $scope.dx=true;
             }else{
                 $scope.dx=false;
             }
         }
     }

     //进行删除
       $scope.del=function () {
           for(var i=0;i<$scope.cart.length;i++){
               if($scope.cart[i].done==true){
                    if($scope.cart[i].num>=2){
                        $scope.cart[i].num--;
                        break;
                    }else{
                        $scope.cart.splice(i,1);
                    }
               }
           }
       }
    //进行批量删除
       $scope.delall=function () {
           for(var i=0;i<$scope.cart.length;i++){
               if($scope.cart[i].done==true){
                   $scope.cart.splice(i,1);
                   i--;

               }
           }
           $scope.dx=false;

       }

});

style.css

ul li{
    list-style: none;
}
img {
    width: 60px;
    height:60px;
}
.tab  td{
    width: 400px;
    height: 100px;
    text-align: center;
}
td{
    text-align: center;
}