Angular购物车的完整版

来源：互联网发布：linux 挂载iso什么意思编辑：程序博客网时间：2024/05/21 13:22

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;}

阅读全文

0 0