angularJS實作簡易購物車的方法-js教程-PHP中文網

首頁

web前端

js教程

angularJS實作簡易購物車的方法

小云云

Mar 31, 2018 pm 05:07 PM

angularjs javascript 購物車

本文主要和大家分享angularJS實現簡易購物車的方法，希望能幫助大家。

<!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>

熱AI工具

Undress AI Tool

免費脫衣圖片

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Clothoff.io

AI脫衣器

Video Face Swap

使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！

熱工具

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

中文版，非常好用

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

Laravel 教程

1602

PHP教程

1504

276

Related knowledge

WebSocket與JavaScript：實現即時監控系統的關鍵技術 Dec 17, 2023 pm 05:30 PM

WebSocket與JavaScript：實現即時監控系統的關鍵技術引言：隨著互聯網技術的快速發展，即時監控系統在各個領域中得到了廣泛的應用。而實現即時監控的關鍵技術之一就是WebSocket與JavaScript的結合使用。本文將介紹WebSocket與JavaScript在即時監控系統中的應用，並給出程式碼範例，詳細解釋其實作原理。一、WebSocket技

如何使用WebSocket和JavaScript實現線上語音辨識系統 Dec 17, 2023 pm 02:54 PM

如何使用WebSocket和JavaScript實現線上語音辨識系統引言：隨著科技的不斷發展，語音辨識技術已成為了人工智慧領域的重要組成部分。而基於WebSocket和JavaScript實現的線上語音辨識系統，具備了低延遲、即時性和跨平台的特點，成為了廣泛應用的解決方案。本文將介紹如何使用WebSocket和JavaScript來實現線上語音辨識系

如何利用JavaScript和WebSocket實現即時線上點餐系統 Dec 17, 2023 pm 12:09 PM

如何利用JavaScript和WebSocket實現即時線上點餐系統介紹：隨著網路的普及和技術的進步，越來越多的餐廳開始提供線上點餐服務。為了實現即時線上點餐系統，我們可以利用JavaScript和WebSocket技術。 WebSocket是一種基於TCP協定的全雙工通訊協議，可實現客戶端與伺服器的即時雙向通訊。在即時線上點餐系統中，當使用者選擇菜餚並下訂單

JavaScript與WebSocket：打造高效率的即時天氣預報系統 Dec 17, 2023 pm 05:13 PM

JavaScript和WebSocket：打造高效的即時天氣預報系統引言：如今，天氣預報的準確性對於日常生活以及決策制定具有重要意義。隨著技術的發展，我們可以透過即時獲取天氣數據來提供更準確可靠的天氣預報。在本文中，我們將學習如何使用JavaScript和WebSocket技術，來建立一個高效的即時天氣預報系統。本文將透過具體的程式碼範例來展示實現的過程。 We

如何使用WebSocket和JavaScript實現線上預約系統 Dec 17, 2023 am 09:39 AM

如何使用WebSocket和JavaScript實現線上預約系統在當今數位化的時代，越來越多的業務和服務都需要提供線上預約功能。而實現一個高效、即時的線上預約系統是至關重要的。本文將介紹如何使用WebSocket和JavaScript來實作一個線上預約系統，並提供具體的程式碼範例。一、什麼是WebSocketWebSocket是一種在單一TCP連線上進行全雙工

簡易JavaScript教學：取得HTTP狀態碼的方法 Jan 05, 2024 pm 06:08 PM

JavaScript教學：如何取得HTTP狀態碼，需要具體程式碼範例前言：在Web開發中，經常會涉及到與伺服器進行資料互動的場景。在與伺服器進行通訊時，我們經常需要取得傳回的HTTP狀態碼來判斷操作是否成功，並根據不同的狀態碼來進行對應的處理。本篇文章將教你如何使用JavaScript來取得HTTP狀態碼，並提供一些實用的程式碼範例。使用XMLHttpRequest

實戰教學：PHP與MySQL實作購物車功能詳解 Mar 15, 2024 pm 12:27 PM

實戰教學：PHP和MySQL實現購物車功能詳解購物車功能是網站開發中常見的功能之一，透過購物車使用者可以輕鬆地將想要購買的商品加入購物車，然後進行結算和付款。在這篇文章中，我們將詳細介紹如何使用PHP和MySQL實作一個簡單的購物車功能，並提供具體的程式碼範例。建立資料庫和資料表首先需要在MySQL資料庫中建立一個用來儲存商品資訊的資料表。以下是一個簡單的數據表

javascript如何使用insertBefore Nov 24, 2023 am 11:56 AM

用法：在JavaScript中，insertBefore()方法用於在DOM樹中插入一個新的節點。這個方法需要兩個參數：要插入的新節點和參考節點（即新節點將要插入的位置的節點）。

See all articles

angularJS實作簡易購物車的方法

熱AI工具

Undress AI Tool

Undresser.AI Undress

AI Clothes Remover

Clothoff.io

Video Face Swap

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題