angularjs购物车

最新推荐文章于 2019-08-05 04:26:52 发布

阳光鬼怪

最新推荐文章于 2019-08-05 04:26:52 发布

阅读量148

点赞数

分类专栏： 4月Android hybrid跨平台开发

本文链接：https://blog.csdn.net/qq_40087072/article/details/78276077

版权

4月Android hybrid跨平台开发专栏收录该内容

14 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="angular-1.3.0.js"></script>
    <script>
        var myapp=angular.module("myapp",[]);
        var data=[
            {
                done:false,
                name:"小米",
                price:666,
                count:2,

            },
            {
                done:false,
                name:"华为",
                price:888,
                count:1,

            },
            {
                done:false,
                name:"苹果",
                price:299,
                count:5,

            },
            {
                done:false,
                name:"小辣椒",
                price:555,
                count:1,

            },
            {
                done:false,
                name:"坚果",
                price:1999,
                count:5,

            }
        ]

        myapp.controller("myCtrl",function ($scope) {
            $scope.data=data;
            $scope.num=0;

            //实际付款
            $scope.money=function () {
                $scope.numsn=0;

                if( $scope.num>9999)
                {
                    $scope.numsn=$scope.num;
                }
                else
                {
                    if($scope.numsn!=0)
                    {
                        $scope.numsn=$scope.num+10;
                    }
                }
                return  $scope.numsn;

            }
            //判断是否包邮
            $scope.baoyou=function () {
                $scope.nums="";
                if( $scope.num>9999)
                {
                    $scope.nums="包邮";
                }
                else
                {
                    $scope.nums="十元";
                }
                return  $scope.nums;
            }
            //商品总价
            $scope.counts=function () {
                $scope.num=0;
                $scope.n=0;
                for(var i=0;i<$scope.data.length;i++)
                {
                    if($scope.data[i].done==true)
                    {
                        $scope.num+=$scope.data[i].price*$scope.data[i].count;
                        $scope.n++;
                    }


                }
                /*  if($scope.n==$scope.data.length)
                  {
                      $scope.chec=true;
                  }*/

            }
            /*删除*/
            $scope.del=function (name) {
                for(var i=0;i<$scope.data.length;i++) {

                    if($scope.data[i].name==name)
                    {
                        $scope.data.splice(i,1);
                    }
                }

            }
            //删除选中的
            $scope.delall=function () {
                for(var i=0;i<$scope.data.length;i++)
                {
                    if($scope.data[i].done==true)
                    {
                        $scope.data.splice(i,1);
                        i--;
                    }
                }
            }
            //小计
            $scope.xj=function (a,b) {
                $scope.nums=a*$scope.data[b].price;
                $scope.counts();
                return $scope.nums;

            }
            //点击全选
            $scope.checkAll=function () {
                for(var i=0;i<$scope.data.length;i++)
                {
                    if($scope.chec==true)
                    {
                        $scope.data[i].done=true;
                    }
                    else{
                        $scope.data[i].done=false;
                    }
                }
                $scope.num=0;
                for(var i=0;i<$scope.data.length;i++)
                {
                    if($scope.data[i].done==true)
                    {
                        $scope.num+=$scope.data[i].price*$scope.data[i].count;

                    }
                }
            }
        })
    </script>
</head>
<body ng-app="myapp" ng-controller="myCtrl">
<button ng-click="delall()">删除选中的</button>
<table  border="1"  bordercolor="#000000" width="500" cellpadding="0" cellspacing="0">
    <thead>
    <tr>
        <th>全选<span><input type="checkbox" ng-click="checkAll()" ng-model="chec"></span></th>
        <th>商品名称</th>
        <th>单价</th>
        <th>购买数量</th>
        <th>小计</th>
        <th>&nbsp;</th>
    </tr>
    </thead>
    <tbody>
    <tr ng-repeat="item in data">
        <td><input type="checkbox" ng-model="item.done" ng-click="counts()"></td>
        <td>{{item.name}}</td>
        <td>{{item.price}}</td>
        <td><input type="number" ng-model="item.count"></td>
        <td>{{xj(item.count,$index)|currency:"RMB"}}</td>
        <td><button ng-click="del(item.name)">删除</button></td>
    </tr>
    </tbody>
</table>
<div>商品总价:<span>{{num}}</span></div>
<div>邮费:<span>{{baoyou()}}</span></div>
<div>实际付款:<span>{{money()}}</span></div>
</body>
</html>

阳光鬼怪

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
angularjs购物车

html>html lang="en">head> meta charset="UTF-8"> title>Titletitle> script src="angular-1.3.0.js">script> script> var myapp=angular.module("myapp",[]); var data=[
复制链接

扫一扫