购物车

来源：互联网发布：华为软件开发招聘编辑：程序博客网时间：2024/05/10 02:09

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
      <script type="text/javascript" src="../bao/angular.js" ></script>
        <style type="text/css">
            td,th{
                width: 150px;
                text-align: left;
            }
            table{
                width: 800px;
            }
            .num{
                width: 70px;
                text-align: center;
            }
            tr td:last-child button {
                background-color: red;
            }
            #foot button{
                background-color: red;
            }
        </style>
    </head>
    
    <body ng-app="myApp">
        <div ng-controller="VC1">
            <table border="" cellspacing="" cellpadding="">
                <tr><th>产品编号</th><th>产品名称</th><th>购买数量</th><th>产品单价</th><th>产品总价</th><th>操作</th></tr>
                <tr ng-repeat="x in Product" >
                    <td>{{x.id}}</td>
                    <td>{{x.name}}</td>
                    <td>
                    <button ng-click="reduce($index)">-</button>
                    <input type="text" class="num" ng-model="x.quantity" ng-change="change($index)" />
                    <button ng-click="add($index)">+</button> </td>
                    <td >{{x.price}}</td>
                    <td>{{x.price * x.quantity}}</td>
                    <td><button ng-click="remove($index)">移除</button></td></tr>
            </table>
            <div id="foot"><span>总价:</span><span ng-bind="totalQuantity()"></span><span>购买数量</span>
                <span >{{numAll()}}</span> <button ng-click="removeAll()">清空购物车</button> </div>
        </div>
    </body>
    <script type="text/javascript">
        var app = angular.module("myApp",[]);
        app.controller("VC1",function($scope){
             $scope.Product = [{
                id: 1000,
                name: "iPhone8",
                quantity: 1,
                price: 8888
            }, {
                id: 1001,
                name: "iPhone9",
                quantity: 1,
                price: 9888

            }, {
                id: 1002,
                name: "iPhone 2s",
                quantity: 1,
                price: 3888
            }, {
                id: 1003,
                name: "iPhone 7P+",
                quantity: 1,
                price: 10088
            }];

            //减少数量
            $scope.reduce = function(index){
                if( $scope.Product[index].quantity > 1){
                        $scope.Product[index].quantity--;
                }else{
                    $scope.remove(index);
                }

            }

            //添加数量函数
            $scope.add = function(index){
                $scope.Product[index].quantity++;
            }

            //所有商品总价函数
            $scope.totalQuantity = function(){
                var allprice = 0
                for(var i = 0 ; i <$scope.Product.length;i++ ){
                    allprice += $scope.Product[i].quantity * $scope.Product[i].price;
                }
                return allprice;
            }

            //购买总数量函数
            $scope.numAll = function(){
                    var numAlls = 0
                for(var i = 0 ; i <$scope.Product.length;i++ ){
                    numAlls += $scope.Product[i].quantity;
                }
                return numAlls;
            }

            //删除当前商品
            $scope.remove = function(index){
                if(confirm("确定要清空数据吗")){
                        $scope.Product.splice(index,1)
                }
            }

            //清空购物车
            $scope.removeAll = function(){
                if(confirm("你确定套清空购物车所有商品吗?")){
                    $scope.Product = [];
                }
            }

            //解决输入框输入负数时变为1
            $scope.change = function(index){
                if ( $scope.Product[index].quantity >= 1) {

                }else{
                    $scope.Product[index].quantity = 1;
                }

            }

            $scope.$watch('Product',function(oldvalue,newvalue){
                console.log(oldvalue);
                console.log(newvalue);
            })




        })


    </script>
</html>

阅读全文

0 0