angularJS實(shí)現(xiàn)簡(jiǎn)易購(gòu)物車的方法
Mar 31, 2018 pm 05:07 PM
本文主要和大家分享angularJS實(shí)現(xiàn)簡(jiǎn)易購(gòu)物車的方法，希望能幫助到大家。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的購(gòu)物車</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}];
//點(diǎn)擊加號(hào)的方法
$scope.add = function (index) {
$scope.data[index].number++;
$scope.sum();
}
//點(diǎn)擊減號(hào)的方法
$scope.jian = function (index) {
//點(diǎn)擊-操作時(shí),當(dāng)商品數(shù)量為1時(shí)，彈出對(duì)話框，詢問(wèn)是否移除
if ($scope.data[index].number == 1) {
if (confirm("您是否將該商品移除購(gòu)物車？")) {
$scope.data[index].number--;
$scope.data.splice(index,1);
$scope.sum();
}
} else if ($scope.data[index].number > 1) {
$scope.data[index].number--;
$scope.sum();
}
}
//計(jì)算商品總價(jià)的方法
$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();
//點(diǎn)擊輸入框的方法
$scope.dianji = function () {
$scope.sum();
}
$scope.shopping = false;
//默認(rèn)全選是不選的
$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;
}
}
//實(shí)現(xiàn)當(dāng)下面全部選中，全選框選中的效果
if ($scope.flag == $scope.data.length) {
$scope.check = true;
} else {
$scope.check = false;
}
}
//判斷全選框下面的多選框有幾個(gè)的方法
//清空購(gòu)物車的方法
$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("請(qǐng)先選擇要操作的商品");
}
}
$scope.show = true;
$scope.remove = function (index) {
$scope.data.splice(index, 1);
if ($scope.data.length == 0) {
$scope.show = false;
$scope.shopping = true;
}
}
//點(diǎn)擊去逛商城的代碼
$scope.showS=function () {
$scope.show = true;
$scope.check=false;
}
});
</script>
</head>
<body ng-app="myapp" ng-controller="myCtrl">
<h1>我的購(gòu)物車</h1>
<p ng-show="shopping">您的購(gòu)物車為空<a href="#" ng-click="showS()">去逛商城</a></p>
<p class="nav">
<button ng-click="clearShpooing()" ng-show="show">清空購(gòu)物車</button>
</p>
<!--創(chuàng)建購(gòu)物車列表-->
<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渲染數(shù)據(jù)到界面-->
<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>
<!--價(jià)錢起前面加"￥"-->
<td colspan="6">總價(jià)為:{{allMoney | currency:"￥"}}</td>
</tr>
</tfoot>
</table>
</body>
</html>相關(guān)推薦：
JavaScript編寫一個(gè)簡(jiǎn)易購(gòu)物車功能
以上是angularJS實(shí)現(xiàn)簡(jiǎn)易購(gòu)物車的方法的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！
熱AI工具
Undress AI Tool
免費(fèi)脫衣服圖片
Undresser.AI Undress
人工智能驅(qū)動(dòng)的應(yīng)用程序，用于創(chuàng)建逼真的裸體照片
AI Clothes Remover
用于從照片中去除衣服的在線人工智能工具。
Clothoff.io
AI脫衣機(jī)
Video Face Swap
使用我們完全免費(fèi)的人工智能換臉工具輕松在任何視頻中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費(fèi)的代碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
功能強(qiáng)大的PHP集成開(kāi)發(fā)環(huán)境
Dreamweaver CS6
視覺(jué)化網(wǎng)頁(yè)開(kāi)發(fā)工具
SublimeText3 Mac版
神級(jí)代碼編輯軟件(SublimeText3)
WebSocket與JavaScript：實(shí)現(xiàn)實(shí)時(shí)監(jiān)控系統(tǒng)的關(guān)鍵技術(shù)
Dec 17, 2023 pm 05:30 PM
WebSocket與JavaScript：實(shí)現(xiàn)實(shí)時(shí)監(jiān)控系統(tǒng)的關(guān)鍵技術(shù)引言：隨著互聯(lián)網(wǎng)技術(shù)的快速發(fā)展，實(shí)時(shí)監(jiān)控系統(tǒng)在各個(gè)領(lǐng)域中得到了廣泛的應(yīng)用。而實(shí)現(xiàn)實(shí)時(shí)監(jiān)控的關(guān)鍵技術(shù)之一就是WebSocket與JavaScript的結(jié)合使用。本文將介紹WebSocket與JavaScript在實(shí)時(shí)監(jiān)控系統(tǒng)中的應(yīng)用，并給出代碼示例，詳細(xì)解釋其實(shí)現(xiàn)原理。一、WebSocket技
如何使用WebSocket和JavaScript實(shí)現(xiàn)在線語(yǔ)音識(shí)別系統(tǒng)
Dec 17, 2023 pm 02:54 PM
如何使用WebSocket和JavaScript實(shí)現(xiàn)在線語(yǔ)音識(shí)別系統(tǒng)引言：隨著科技的不斷發(fā)展，語(yǔ)音識(shí)別技術(shù)已經(jīng)成為了人工智能領(lǐng)域的重要組成部分。而基于WebSocket和JavaScript實(shí)現(xiàn)的在線語(yǔ)音識(shí)別系統(tǒng)，具備了低延遲、實(shí)時(shí)性和跨平臺(tái)的特點(diǎn)，成為了一種被廣泛應(yīng)用的解決方案。本文將介紹如何使用WebSocket和JavaScript來(lái)實(shí)現(xiàn)在線語(yǔ)音識(shí)別系
如何利用JavaScript和WebSocket實(shí)現(xiàn)實(shí)時(shí)在線點(diǎn)餐系統(tǒng)
Dec 17, 2023 pm 12:09 PM
如何利用JavaScript和WebSocket實(shí)現(xiàn)實(shí)時(shí)在線點(diǎn)餐系統(tǒng)介紹：隨著互聯(lián)網(wǎng)的普及和技術(shù)的進(jìn)步，越來(lái)越多的餐廳開(kāi)始提供在線點(diǎn)餐服務(wù)。為了實(shí)現(xiàn)實(shí)時(shí)在線點(diǎn)餐系統(tǒng)，我們可以利用JavaScript和WebSocket技術(shù)。WebSocket是一種基于TCP協(xié)議的全雙工通信協(xié)議，可以實(shí)現(xiàn)客戶端與服務(wù)器的實(shí)時(shí)雙向通信。在實(shí)時(shí)在線點(diǎn)餐系統(tǒng)中，當(dāng)用戶選擇菜品并下單
JavaScript和WebSocket：打造高效的實(shí)時(shí)天氣預(yù)報(bào)系統(tǒng)
Dec 17, 2023 pm 05:13 PM
JavaScript和WebSocket：打造高效的實(shí)時(shí)天氣預(yù)報(bào)系統(tǒng)引言：如今，天氣預(yù)報(bào)的準(zhǔn)確性對(duì)于日常生活以及決策制定具有重要意義。隨著技術(shù)的發(fā)展，我們可以通過(guò)實(shí)時(shí)獲取天氣數(shù)據(jù)來(lái)提供更準(zhǔn)確可靠的天氣預(yù)報(bào)。在本文中，我們將學(xué)習(xí)如何使用JavaScript和WebSocket技術(shù)，來(lái)構(gòu)建一個(gè)高效的實(shí)時(shí)天氣預(yù)報(bào)系統(tǒng)。本文將通過(guò)具體的代碼示例來(lái)展示實(shí)現(xiàn)的過(guò)程。We
如何使用WebSocket和JavaScript實(shí)現(xiàn)在線預(yù)約系統(tǒng)
Dec 17, 2023 am 09:39 AM
如何使用WebSocket和JavaScript實(shí)現(xiàn)在線預(yù)約系統(tǒng)在當(dāng)今數(shù)字化的時(shí)代，越來(lái)越多的業(yè)務(wù)和服務(wù)都需要提供在線預(yù)約功能。而實(shí)現(xiàn)一個(gè)高效、實(shí)時(shí)的在線預(yù)約系統(tǒng)是至關(guān)重要的。本文將介紹如何使用WebSocket和JavaScript來(lái)實(shí)現(xiàn)一個(gè)在線預(yù)約系統(tǒng)，并提供具體的代碼示例。一、什么是WebSocketWebSocket是一種在單個(gè)TCP連接上進(jìn)行全雙工
簡(jiǎn)易JavaScript教程：獲取HTTP狀態(tài)碼的方法
Jan 05, 2024 pm 06:08 PM
JavaScript教程：如何獲取HTTP狀態(tài)碼，需要具體代碼示例前言：在Web開(kāi)發(fā)中，經(jīng)常會(huì)涉及到與服務(wù)器進(jìn)行數(shù)據(jù)交互的場(chǎng)景。在與服務(wù)器進(jìn)行通信時(shí)，我們經(jīng)常需要獲取返回的HTTP狀態(tài)碼來(lái)判斷操作是否成功，根據(jù)不同的狀態(tài)碼來(lái)進(jìn)行相應(yīng)的處理。本篇文章將教你如何使用JavaScript獲取HTTP狀態(tài)碼，并提供一些實(shí)用的代碼示例。使用XMLHttpRequest
實(shí)戰(zhàn)教程：PHP和MySQL實(shí)現(xiàn)購(gòu)物車功能詳解
Mar 15, 2024 pm 12:27 PM
實(shí)戰(zhàn)教程：PHP和MySQL實(shí)現(xiàn)購(gòu)物車功能詳解購(gòu)物車功能是網(wǎng)站開(kāi)發(fā)中常見(jiàn)的功能之一，通過(guò)購(gòu)物車用戶可以方便地將想要購(gòu)買的商品加入購(gòu)物車，然后進(jìn)行結(jié)算和支付。在這篇文章中，我們將詳細(xì)介紹如何使用PHP和MySQL實(shí)現(xiàn)一個(gè)簡(jiǎn)單的購(gòu)物車功能，并提供具體的代碼示例。創(chuàng)建數(shù)據(jù)庫(kù)和數(shù)據(jù)表首先需要在MySQL數(shù)據(jù)庫(kù)中創(chuàng)建一個(gè)用來(lái)存儲(chǔ)商品信息的數(shù)據(jù)表。以下是一個(gè)簡(jiǎn)單的數(shù)據(jù)表
javascript中如何使用insertBefore
Nov 24, 2023 am 11:56 AM
用法：在JavaScript中，insertBefore()方法用于在DOM樹(shù)中插入一個(gè)新的節(jié)點(diǎn)。這個(gè)方法需要兩個(gè)參數(shù)：要插入的新節(jié)點(diǎn)和參考節(jié)點(diǎn)（即新節(jié)點(diǎn)將要被插入的位置的節(jié)點(diǎn)）。
