Angular购物车的简单实现

最新推荐文章于 2021-08-16 09:07:23 发布

春风十里桃花开

最新推荐文章于 2021-08-16 09:07:23 发布

阅读量390

点赞数

分类专栏：混合开发文章标签： AngularJs 布局

本文链接：https://blog.csdn.net/wanleiSuper/article/details/78311955

版权

混合开发专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../angular-1.5.5/angular.js"></script>
    <script>
        var myapp=angular.module("myapp",[]);
        myapp.controller("myCtrl",function ($scope) {
            $scope.nx="";
            $scope.nc="";
            $scope.jj="";
            $scope.jg="";
            $scope.addgoods=function () {
                alert(0)
                $scope.data.products.push({category:$scope.nx,name:$scope.nc,desc:$scope.jj,price:$scope.jg,imgsrc:"images/TB1_50x50.jpg",done:false});
            }

            $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},
                ]
            };


            //触发出發checkbox的事件
            $scope.dj=function () {
                var s=0;   //計數到底勾選了幾個
                var j=0;    //傳遞下標作用
                for(var i=0;i<$scope.data.categories.length;i++){
                    if($scope.data.categories[i].done==true){
                        s++;
                        j=i;
                    }
                }
                if(s>=2){
                    alert("您勾选了"+(j+1));
                }
                else
                if(s==0){
                    alert("您還沒有勾選");
                }
                else
                if(s==1){
                    $scope.ss=$scope.data.categories[j].category;
                }
            };

            //进行全选
            $scope.xz=false;
            $scope.quanxuan=function () {
                if($scope.xz==true){
                    for (var i=0;i<$scope.dd.length;i++){
                        $scope.dd[i].done=true;
                    }
                }else{
                    for (var i=0;i<$scope.dd.length;i++){
                        $scope.dd[i].done=false;
                    }
                }
            }

            /*//进行反选
            $scope.fx=function (index) {
                for(var i=0,i<$scope.dd.length,i++){

                    if($scope.dd[i].done==true){
                        $scope.xz=true;
                    }else {
                        $scope.xz=false;
                    }
                }
            }*/

            $scope.dd=[];
            $scope.zj=false;
            //点击添加到购物车
            $scope.add=function (item) {
                $scope.has=false;//   //判断性数组中的名字和要添加的物品名字是否相等，相等说明是同一件商品
                for(var i=0;i< $scope.dd.length;i++){
                    //判断性数组中的名字和要添加的物品名字是否相等，相等说明是同一件商品
                    if( $scope.dd[i].name==item.name){
                        $scope.has=true;
                        $scope.dd[i].num++;  //如果是同一件商品添加的时候就让数量加加
                        break;
                    }else{
                        $scope.has=false;
                    }
                }
                //判断$scope.has为false时说明是不一样的商品
                if($scope.has==false){
                    $scope.dd.push({name:item.name,num:1,price:item.price,done: $scope.zj});
                }

            }
            //点击删除的事件
            $scope.del=function (index) {

                //判断数量如果数量大于等于2时让数量减减，否则就从数组中删除

                if($scope.dd[index].num>=2){

                    $scope.dd[index].num--;

                }else if($scope.dd[index].done==true){

                    $scope.dd.splice(index,1);
                }
            }
            //批量删除
            $scope.delAll=function () {
                for(var i=0;i<$scope.dd.length;i++){
                    if($scope.dd[i].done==true){
                        $scope.dd.splice(i,1);
                        i--;
                    }

                }
            }

            //计算总价

            $scope.zongjia=function () {
                var zj=0;
                for(var i=0;i<$scope.dd.length;i++){
                    zj+=$scope.dd[i].num*$scope.dd[i].price;
                }
                return zj;
            }



        });


    </script>
    <style>
        ul li{
            list-style: none;
        }
    </style>
</head>
<body ng-app="myapp" ng-controller="myCtrl">

<span>商品类型:</span><input type="text" ng-model="nx"/>
<span>商品名称:</span><input type="text"  ng-model="nc"/>
<span>季节商品:</span><input type="text"  ng-model="jj"/>
<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-click="dj()" ng-model="item.done"/>
        <span>{{item.category}}</span>
    </li>
</ul>
<table>
    <tr>
        <th><input type="checkbox" ng-model="xz" ng-click="quanxuan()"/>全選</th>
        <th>名称</th>
        <th>数量</th>
        <th>单价</th>
        <th>小计</th>
        <th>操作<button ng-click="delAll()">批量删除</button></th>
    </tr>
    <tr ng-repeat="item in dd">
        <td> <input type="checkbox" ng-model="item.done" ng-click="fx($index)" /></td>
        <td>{{item.name}}</td>
        <td>{{item.num}}</td>
        <td>{{item.price}}</td>
        <td>{{item.price*item.num}}</td>
        <td><button ng-modle="item.done" ng-click="del($index)">删除</button></td>
    </tr>
</table>
<p>总价：<span>{{zongjia()}}</span></p>

<ul>
    <li ng-repeat="item in data.products|filter:ss">
        <table>
            <tr>
                <td>
                    <p>{{item.category+item.name}}</p>
                </td>
                <td rowspan="2" style="width: 400px;margin-bottom: 1px">
                    <p style="font-size: 10px">{{item.desc}}</p>
                </td>
                <td>{{item.price|currency:"￥"}}</td>

            </tr>
            <tr>
                <td><img src="{{item.imgsrc}}" style="width: 60px;height: 60px">
                </td>
                <td><button ng-click="add(item)">添加到购物车</button></td>
            </tr>
        </table>
    </li>

</ul>

</body>
</html>

春风十里桃花开

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Angular购物车的简单实现

Title var myapp=angular.module("myapp",[]); myapp.controller("myCtrl",function ($scope) { $scope.nx=""; $scope.nc=""; $scope.jj="";
复制链接

扫一扫