Heim > Artikel > Web-Frontend > So implementieren Sie einen einfachen Warenkorb in AngularJS

So implementieren Sie einen einfachen Warenkorb in AngularJS

小云云Original: 2018-03-31 17:07:011749Durchsuche

In diesem Artikel erfahren Sie hauptsächlich, wie Sie einen einfachen Warenkorb in AngularJS implementieren. Ich hoffe, er kann Ihnen helfen.

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的购物车</title>

<script type="text/javascript" src="../js/angular.min.js" ></script>
<script type="text/javascript" src="../js/jquery-3.3.1.min.js" ></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        table {
            border-collapse: collapse;
        }

        td, th {
            padding: 3px;
            height: 50px;
            width: 100px;
            border: 1px solid gainsboro;
            text-align: left;
        }

        .nav {
            width: 800px;
            text-align: right;
        }

        tbody tr td:nth-child(4) {
            width: 200px;
        }

        tbody tr td:nth-child(4) button {
            width: 30px;
            height: 30px;
        }

        tbody tr td:nth-child(4) input {
            width: 30px;
            height: 30px;
            border: 1px solid gainsboro;
            border-radius: 5px;
        }

        .nav button {
            width: 150px;
            height: 40px;
            background: red;
            color: white;
            border: 0;
            border-radius: 5px;
        }

        button {
            width: 50px;
            height: 30px;
            background: blue;
            border: 0;
            border-radius: 5px;
            color: white;

        }

        a {
            text-decoration: none;
        }
    </style>
    <script>
        var myapp = angular.module("myapp", []);
        myapp.controller("myCtrl", function ($scope) {
            //自拟商品信息
            $scope.data = [{"name": "qq", "price": 12.9, "number": 1, done: false},
                {"name": "wx", "price": 23.9, "number": 1, done: false},
                {"name": "wx", "price": 99.9, "number": 1, done: false},
                {"name": "wb", "price": 63.9, "number": 1, done: false}];
            //点击加号的方法
            $scope.add = function (index) {
                $scope.data[index].number++;
                $scope.sum();
            }
            //点击减号的方法
            $scope.jian = function (index) {
                //点击-操作时,当商品数量为1时，弹出对话框，询问是否移除
                if ($scope.data[index].number == 1) {
                    if (confirm("您是否将该商品移除购物车？")) {
                        $scope.data[index].number--;
                        $scope.data.splice(index,1);
                        $scope.sum();
                    }
                } else if ($scope.data[index].number > 1) {
                    $scope.data[index].number--;
                    $scope.sum();

                }
            }

            //计算商品总价的方法
            $scope.sum = function () {
                $scope.allMoney = 0;
                for (var i = 0; i < $scope.data.length; i++) {
                    $scope.allMoney += $scope.data[i].price * $scope.data[i].number;
                }
            }
            $scope.sum();
            //点击输入框的方法
            $scope.dianji = function () {
                $scope.sum();
            }
            $scope.shopping = false;
            //默认全选是不选的
            $scope.check = false;
            //删除全部商品的方法
            $scope.delAll = function (check) {
                $scope.checkD(check);
            }
            $scope.checkD = function (state) {
                for (var i = 0; i < $scope.data.length; i++) {
                    $scope.data[i].done = state;
                }
            }
            //下面的选框代表
            $scope.checkSS = false;
            $scope.checkS = function () {
                $scope.flag = 0;
                for (var i = 0; i < $scope.data.length; i++) {
                    if ($scope.data[i].done == true) {
                        $scope.flag++;
                        $scope.checkSS = true;
                    }
                }
                //实现当下面全部选中，全选框选中的效果
                if ($scope.flag == $scope.data.length) {
                    $scope.check = true;
                } else {
                    $scope.check = false;
                }
            }
            //判断全选框下面的多选框有几个的方法
            //清空购物车的方法
            $scope.clearShpooing = function () {
                if ($scope.check == true || $scope.checkSS == true) {
                    for (var i = 0; i < $scope.data.length; i++) {
                        if ($scope.data[i].done == true) {
                            $scope.data.splice(i--, 1);
                            if ($scope.data.length == 0) {
                                $scope.show = false;
                                $scope.shopping = true;
                            }
                            $scope.sum();
                        }
                    }
                    if ($scope.check == true) {
                        $scope.data.length = 0;
                        $scope.show = false;
                        $scope.shopping = true;
                    }
                } else {
                    alert("请先选择要操作的商品");
                }

            }
            $scope.show = true;
            $scope.remove = function (index) {
                $scope.data.splice(index, 1);
                if ($scope.data.length == 0) {
                    $scope.show = false;
                    $scope.shopping = true;
                }
            }
            //点击去逛商城的代码
            $scope.showS=function () {
                $scope.show = true;
                $scope.check=false;
            }
        });
    </script>
</head>
<body ng-app="myapp" ng-controller="myCtrl">
<h1>我的购物车</h1>
<p ng-show="shopping">您的购物车为空<a href="#" ng-click="showS()">去逛商城</a></p>
<p class="nav">
    <button ng-click="clearShpooing()" ng-show="show">清空购物车</button>
</p>
<!--创建购物车列表-->
<table ng-show="show">
    <thead>
    <th><input type="checkbox" ng-model="check" ng-click="delAll(check)"></th>
    <th>name</th>
    <th>price</th>
    <th>number</th>
    <th>totalprice</th>
    <th>option</th>
    </thead>
    <tbody>
    <!--ng-repeat渲染数据到界面-->
    <tr ng-repeat="item in data">
        <td><input type="checkbox" ng-model="item.done" ng-click="checkS()"></td>
        <td>{{item.name}}</td>
        <td>{{item.price | currency:"￥"}}</td>
        <td>
            <button ng-click="jian($index)">-</button>
            <input type="text" ng-model="item.number" ng-checked="dianji()">
            <button ng-click="add($index)">+</button>
        </td>
        <td>{{item.price*item.number |currency:"￥"}}</td>
        <td>
            <button ng-click="remove($index)">删除</button>
        </td>
    </tbody>
    <tfoot>
    <tr>
        <!--价钱起前面加"￥"-->
        <td colspan="6">总价为:{{allMoney | currency:"￥"}}</td>
    </tr>
    </tfoot>
</table>
</body>
</html>

Verwandte Empfehlungen:

Schreiben Sie eine einfache Warenkorbfunktion in JavaScript

Das obige ist der detaillierte Inhalt vonSo implementieren Sie einen einfachen Warenkorb in AngularJS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Einfaches Verständnis von Vue Conditional Rendering_vue.jsNächster Artikel：Einfaches Verständnis von Vue Conditional Rendering_vue.js

In Verbindung stehende Artikel

Mehr sehen