Da购物车

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        a {
            text-decoration: none;
        }

        p button {
            margin-left: 550px;
            background: red;
            color: white;
        }

        table {
            border-collapse: collapse;
        }

        th, td {
            padding: 10px;
            text-align: center;
            border: 1px solid black;
        }

        td button {
            background: blue;
            color: white;
        }
    </style>
    <script src="../angular-1.5.5/angular.min.js"></script>
    <script>
        angular.module("myapp", [])
            .controller("myCtrl", function ($scope) {
                $scope.show = true;
                $scope.shows = false;
                $scope.arr = [{
                    name: "qq", price: 12.00, number: 1, check: false
                }, {
                    name: "ww", price: 24.00, number: 1, check: false
                }, {
                    name: "ee", price: 48.00, number: 1, check: false
                }, {
                    name: "rr", price: 66.00, number: 1, check: false
                }]
                //添加商品数量
                $scope.add = function (index) {
                    $scope.arr[index].number++;
                }
                //减少商品数量
                $scope.cut = function (index) {
                    $scope.arr[index].number--;
                    if ($scope.arr[index].number == 0) {
                        var delee = confirm("是否删除该商品?");
                        if (delee) {
                            $scope.arr.splice(index, 1);
                        } else {
                            $scope.arr[index].number++;
                        }
                    }
                }
                //商品总价
                $scope.all = function () {
                    var sum = 0;
                    for (var i = 0; i < $scope.arr.length; i++) {
                        sum += $scope.arr[i].number * $scope.arr[i].price;
                    }
                    return sum;
                }
                //全选
                $scope.quanxuan =function (dui) {
                    if(dui==true){
                        for (var i = 0; i < $scope.arr.length; i++) {
                            $scope.arr[i].check=dui
                        }
                    }else{
                        for (var i = 0; i < $scope.arr.length; i++) {
                            $scope.arr[i].check=dui
                        }
                    }
                }

                //清除购物车
                $scope.eliminate = function (dui) {
                    if (dui == true) {
                        var delee = confirm("是否清除购物车?");
                        if (delee) {
                            $scope.show = false;
                            $scope.shows = true
                        } else {
                            $scope, show = true;
                            $scope.shows = false
                        }
                    }else{
                        //删除选中的
                        for (var i = $scope.arr.length-1; i >=0; i--) {
                           if($scope.arr[i].check==true){
                               $scope.arr.splice(i, 1);
                           }
                        }
                    }
                }
                //点击删除按钮
                $scope.shanchu=function (index) {
                    $scope.arr.splice(index, 1);
                }

                //判断对勾
                $scope.dange=function () {
                    var flag = 0
                    for (var i = 0; i < $scope.arr.length; i++) {
                        if($scope.arr[i].check==true){
                            flag++;
                        }
                    }
                    if(flag==$scope.arr.length){
                        alert("全部选中")
                        $scope.dui=true;
                    }else{
                        $scope.dui=false;
                    }
                }


            })
    </script>
</head>
<body ng-app="myapp" ng-controller="myCtrl">
<h1>我的购物车</h1>
<div ng-if="show">
    <p>
        <button ng-click="eliminate(dui)">清除购物车</button>
    </p>
    <table>
        <tr>
            <th><input type="checkbox" ng-model="dui" ng-click="quanxuan(dui)"></th>
            <th>name</th>
            <th>price</th>
            <th>number</th>
            <th>totalPrice</th>
            <th>optionn</th>
        </tr>
        <tr ng-repeat="item in arr">
            <td><input type="checkbox" ng-model="item.check" ng-click="dange()"></td>
            <td>{{item.name}}</td>
            <td>{{item.price}}</td>
            <td>
                <button ng-click="cut($index)">-</button>
                <input type="text" ng-model="item.number">
                <button ng-click="add($index)">+</button>
            </td>
            <td>{{item.price*item.number|currency:"￥"}}</td>
            <td>
                <button ng-click="shanchu($index)">删除</button>
            </td>
        </tr>
        <tr>
            <td colspan="6">总价为: <span ng-bind="all()"></span></td>
        </tr>
    </table>
</div>
<p ng-if="shows">您的购物车为空, <a href="#">去逛商场</a></p>
</body>
</html>
posted on 2017-09-22 10:16 权威的程序阅读(157) 评论(0) 收藏举报