xiaoyang,shopping

最新推荐文章于 2024-09-12 14:25:40 发布

xsw73692

最新推荐文章于 2024-09-12 14:25:40 发布

阅读量293

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/Rbh73692/article/details/78312361

本文介绍了一个使用Angular开发的简易购物车应用案例。该应用实现了商品增删、数量修改、总价计算及邮费策略等功能，并通过模块化的方式组织代码，便于理解和维护。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        th,td{
            padding: 10px;
            border: 1px solid #000000;
        }
        table{
            border-collapse: collapse;
        }
    </style>
    <script src="angular-1.3.0.js"></script>
    <script>
        var myapp = angular.module("myapp",[]);
        myapp.controller("myCtrl",function ($scope) {
            $scope.data = [{
                name:"zs",
                price:"1200",
                number:2,
                sum:2400,
                check:false
            },{
                name:"qq",
                price:"1200",
                number:2,
                sum:2400,
                check:false
            },{
                name:"ee",
                price:"1200",
                number:2,
                sum:2400,
                check:false
            },{
                name:"ww",
                price:"1200",
                number:2,
                sum:2400,
                check:false
            }];

            //减小
            $scope.min = function (index) {
                $scope.data[index].number--;
            }
            //增加
            $scope.add = function (index) {
                $scope.data[index].number++;
            }

            //删除
            $scope.del = function(index){
                if($scope.data[index].check==true){
                    if(confirm("确定删除吗？")){
                        $scope.data.splice(index,1)
                    }
                }
            }

            //应付金额
            $scope.count = function () {
                var aaa = 0;
                for(var i = 0;i<$scope.data.length;i++){
                    aaa+= $scope.data[i].price*$scope.data[i].number
                }
                return aaa;
            }

            //邮费
            $scope.$watch("count()",function (newvalue) {
                if(newvalue<=10000){
                    $scope.yf = 10;
                }else{
                    $scope.yf= 0
                }
            })
            $scope.checkAll = false;

            //全选
            $scope.checkedAll = function () {

                if($scope.checkAll==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 n = 0;
            //反选
            $scope.addCheck = function (index) {
                if($scope.data[index].check = true){
                    n++;
                }else{
                    n--;
                }
                if(n==$scope.data.length){
                    $scope.checkAll = true;
                }else{
                    $scope.checkAll = false;
                }
            }

        });
    </script>
</head>
<body ng-app="myapp" ng-controller="myCtrl">
<h1>我的购物车</h1>
<button style="float: right">清空购物车</button>
<table>
    <thead>
    <tr>
        <td><input type="checkbox" ng-model="checkAll"ng-click="checkedAll()"></td>
        <td>name</td>
        <td>price</td>
        <td>number</td>
        <td>sum</td>
        <td>option</td>
    </tr>
    </thead>
    <tbody>
    <tr ng-repeat="item in data">
        <td><input type="checkbox" ng-model="item.check" ng-click="addCheck($index)" ></td>
        <td>{{item.name}}</td>
        <td>{{item.price}}</td>
        <td><span ng-click="min($index)">-</span><input type="text" ng-model="item.number"><span ng-click="add($index)">+</span></td>
        <td>{{item.price*item.number}}</td>
        <td><button ng-click="del($index)">删除</button></td>
    </tr>

    </tbody>
</table>
<p>应付金额<a>{{count()}}</a></p>
<p>邮费<a>{{yf}}</a></p>
<p>实付金额<a>{{count()+yf}}</a></p>
</body>
</html>