模拟购物车（angular）

最新推荐文章于 2019-06-11 15:57:18 发布

PremierAmour

最新推荐文章于 2019-06-11 15:57:18 发布

阅读量445

点赞数

文章标签： angular

本文链接：https://blog.csdn.net/PremierAmour/article/details/78860747

版权

这里写图片描述

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
    <script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script>

    <body ng-app="myapp" ng-controller="mycontroller">
        <input type="checkbox" />奇趣工坊
        <hr/>
        <div ng-repeat="good in goods">
            <table>

                <tr>
                    <td>
                        <input type="checkbox" ng-checked="flas2" ng-click="ss($index)" ng-model="ff" />
                    </td>

                    <td>
                        <img src="img/a15.png" />

                    </td>
                    <td>
                        <h6>{{good.sname}}</h6>
                        <h6>{{good.sprice|currency:"￥"}}</h6>
                        <input type="button" value="-" ng-click="jianjian($index)" /> {{good.scount}}
                        <input type="button" value="+" ng-click="jiajia($index)" />
                        <a href="#" ng-click="dele($index)">删除</a>

                    </td>
                </tr>
            </table>
            <hr/>
        </div>
        <input type="checkbox" ng-click="quxuan()" ng-model="flas2" />全选 合计:
        <span ng-model="sum">{{sum|currency:"￥"}}</span>
        <input type="button" value="结算" />

    </body>
    <script type="text/javascript">
        var mo = angular.module("myapp", []);
        mo.controller("mycontroller", function($scope) {
            //总合
            $scope.sum = 0;
            var sl = 0; //设置的数量
            $scope.goods = [{
                    "sname": "手办",
                    "sprice": "150",
                    "scount": sl,
                    "flas": false

                }, {
                    "sname": "手办",
                    "sprice": "150",
                    "scount": sl,
                    "flas": false
                }, {
                    "sname": "手办",
                    "sprice": "150",
                    "scount": sl,
                    "flas": false

                }]
                //减的点击事件
            $scope.jianjian = function($index) {
                    //获取数量
                    var cc = $scope.goods[$index].scount;

                    if (cc == 0) {
                        alert("没有的")
                        return;
                    }
                    //设置变量接受方便的值
                    var cc1 = cc - 1;
                    //赋回去
                    $scope.goods[$index].scount = cc1;

                }
                //加的点击事件
            $scope.jiajia = function($index) {
                    //获取数量
                    var cc = $scope.goods[$index].scount;
                    //设置变量接受方便的值
                    var cc1 = cc + 1;
                    //赋回去
                    $scope.goods[$index].scount = cc1;

                }
                //删除
            $scope.dele = function($index) {

                    //取出删除的对象
                    var aa = $scope.goods.splice($index, 1);

                    //用总和减去删掉的价格
                    $scope.sum = $scope.sum - aa[$index].sprice * aa[$index].scount;

                }
                //单选
            $scope.ss = function($index) {
                //获取flas 初始值是false
                if ($scope.goods[$index].flas == false) {
                    //scope.goods[$index].flas赋为true
                    $scope.goods[$index].flas = true;
                    //  取出数量+价格 赋给总合
                    $scope.sum = $scope.sum + $scope.goods[$index].scount * $scope.goods[$index].sprice;
                } else {
                    //没单选，综合归0
                    $scope.sum = 0;
                    //scope.goods[$index].false
                    $scope.goods[$index].flas = false;

                }
            }

            //全选
            $scope.quxuan = function() {
                //获取全选的MODLE值
                var tt = $scope.flas2;
                //赋给单选框
                $scope.flas = tt;
                //是true 
                if ($scope.flas) {

                    //综合归0
                    $scope.sum = 0;
                    //便利
                    for (var i = 0; i < $scope.goods.length; i++) {
                        //  取出数量+价格 
                        var shu = $scope.goods[i].scount;
                        var price = $scope.goods[i].sprice;
                        //赋给总合
                        $scope.sum = $scope.sum + shu * price; 

                    }
                } else {
                    //没全选，综合归0
                    $scope.sum = 0;

                }
                //删除
                $scope.dele = function($index) {

                    //取出删除的对象
                    var aa = $scope.goods.splice($index, 1);

                    //用总和减去删掉的价格
                    $scope.sum = $scope.sum - aa[$index].sprice * aa[$index].scount;

                }

            }

        })
    </script>

</html>

PremierAmour

关注

0
点赞
踩
0

收藏

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

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> </head> <script src="js/jquery-1.11.0.min.js" type="text/javascript"></script> <script src="js/angu
复制链接

扫一扫