购物车angular

最新推荐文章于 2021-10-20 08:41:54 发布

阳间鬼

最新推荐文章于 2021-10-20 08:41:54 发布

阅读量236

点赞数

本文链接：https://blog.csdn.net/adminFanj/article/details/78348697

版权

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="angular-1.3.0.js"></script>
    <style>
        .s{
            text-decoration: none;
        }
        table{
            border-collapse: collapse;
        }
    </style>
    <script type="text/javascript">
        var app=angular.module("m",[]);
        app.controller("myc",function($scope){
            $scope.div1=false;
            $scope.div2=true;
            $scope.data=[
                {
                    name:"qq",
                    price:"12.50",
                    number:1
                },
                {
                    name:"ww",
                    price:"23.50",
                    number:3
                },
                {
                    name:"we",
                    price:"99.90",
                    number:2
                },
                {
                    name:"vc",
                    price:"99.90",
                    number:2
                }
            ]
            //全选
            $scope.che=false;
            $scope.cheall= function () {
                if($scope.che==true){
                    for(var i=0;i<$scope.data.length;i++){
                        $scope.data[i].check=true;
                    }
                }else{
                    for(var i=0;i<$scope.data.length;i++){
                        $scope.data[i].check=false;
                    }
                }
            }
            //反选
            var a=0;
            $scope.chepl=function(index){
                if($scope.data[index].check==true){
                    a++;
                }else{
                    a--;
                }
                if(a==$scope.data.length){
                    $scope.che=true;
                }else{
                    $scope.che=false;
                }
            }
            $scope.del= function (index) {
                $scope.data.splice(index,1);
                if($scope.data.length==0){
                   $scope.div1=true;
                   $scope.div2=false;
                }
            }
            //清空购物车
            $scope.qk= function () {
                $scope.data=[];
                $scope.che=false;
                $scope.div1=true;
                $scope.div2=false;
            }
            //加号按钮的点击事件
            $scope.jia= function (index) {
                $scope.data[index].number++;
            }
            //减号按钮的点击事件
            $scope.jian= function (index) {
                if($scope.data[index].number==1){
                    //如果已经数量为1了 ,不能再减去,,询问是否删除
                    var queren = confirm("是否删除该商品?");
                    if(queren){
                        //当用户点击”确认”时删除该条商品信息
                        $scope.data.splice(index,1);
                        if($scope.data.length==0){
                            //如果数组没数据了,,就隐藏div
                            $scope.div2=false;
                            $scope.div1=true;
                        }
                    }
                }else{
                    $scope.data[index].number--;
                }
            }
            //计算总价的方法
            $scope.zongjia= function () {
                var zj=0;//默认总价是0
                for(var u in $scope.data){
                    zj += $scope.data[u].price * $scope.data[u].number;
                }
                return zj;
            }
            $scope.zongliang= function () {
                var zongliang=0;//默认总价是0
                for(var i in $scope.data){
                    zongliang += $scope.data[i].number;
                }
                return zongliang;
            }
        });
    </script>
</head>
<body ng-app="m" ng-controller="myc">
    <div ng-show="div1">您的购物车为空,<a class="s" href="#">去逛商场</a></div>
    <div ng-show="div2">
        <table border="1" align="center" width="600px">
            <tr >
                <td colspan="6">
                    <button style="float: right;border-collapse: collapse;background-color: #880000;color: #f5f5f5" ng-click="qk()">清空购物车</button>
                </td>
            </tr>
            <tr align="center">
                <td><input type="checkbox" ng-model="che" ng-click="cheall()"></td>
                <td>name</td>
                <td>price</td>
                <td>number</td>
                <td>totalprice</td>
                <td>option</td>
            </tr>
            <tr ng-repeat="item in data" align="center">
                <td><input type="checkbox" ng-model="item.check" ng-click="chepl($index)"></td>
                <td>{{item.name}}</td>
                <td>{{item.price | currency:"￥"}}</td>
                <td>
                    <button ng-click="jian($index)" style="background-color: #007aff;border: 0">-</button>
                    <input type="number" ng-model="item.number">
                    <button ng-click="jia($index)" style="background-color: #007aff;border: 0">+</button>
                </td>
                <td>{{item.price*item.number | currency:"￥"}}</td>
                <td>
                    <button style="border:0 ; background-color: #007aff" ng-click="del($index)">删除</button>
                </td>
            </tr>
            <tr>
                <td colspan="6">
                    总价为:{{zongjia() | currency:"￥"}}<span style="margin-left: 150px">总数量为:{{zongliang()}}</span>
                </td>
            </tr>
        </table>
    </div>
</body>
</html>

阳间鬼

关注

0
点赞
踩
0

收藏

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

html>html>head lang="en"> meta charset="UTF-8"> title>title> script type="text/javascript" src="angular-1.3.0.js">script> style> .s{ text-decoration: none;
复制链接

扫一扫