小編給大家分享一下angularjs怎么實(shí)現(xiàn)簡單的購物車功能,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
讓客戶滿意是我們工作的目標(biāo),不斷超越客戶的期望值來自于我們對這個(gè)行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡單的方式提供給客戶,將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價(jià)值的長期合作伙伴,公司提供的服務(wù)項(xiàng)目有:空間域名、雅安服務(wù)器托管、營銷軟件、網(wǎng)站建設(shè)、丹江口網(wǎng)站維護(hù)、網(wǎng)站推廣。
1、能夠嵌入動(dòng)態(tài)文本于HTML頁面。2、對瀏覽器事件做出響應(yīng)。3、讀寫HTML元素。4、在數(shù)據(jù)被提交到服務(wù)器之前驗(yàn)證數(shù)據(jù)。5、檢測訪客的瀏覽器信息。6、控制cookies,包括創(chuàng)建和修改等。7、基于Node.js技術(shù)進(jìn)行服務(wù)器端編程。
具體內(nèi)容如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; padding: 0; margin-left: 10px; } li{ list-style: none; } .add,.reduce{ display: inline-block; width: 20px; height: 20px; border: 1px solid #000; text-align: center; } .line{ border-bottom: 1px solid #000; } </style> <script src="angular-1.5.5/angular.min.js"></script> <script> var myapp=angular.module("myapp",[]); myapp.controller("myCtrl",function($scope){ $scope.cart=[ { "shopName":"趣藝工坊", "checked":false, "goods":[ { "goodsName":"純手工制作木質(zhì)時(shí)鐘精致家具裝飾擺件", "pic":"images/cart_01.jpg", "price":150.00, "number":1, "checked":false }, { "goodsName":"木質(zhì)藍(lán)牙音箱包郵實(shí)木家具裝飾擺件", "pic":"images/cart_02.jpg", "price":119.00, "number":2, "checked":true }, { "goodsName":"裝飾木雕,獨(dú)特趣味設(shè)計(jì)家具裝飾擺件", "pic":"images/cart_03.jpg", "price":120.00, "number":0, "checked":false } ] }, { "shopName":"鄰街紙藝", "checked":false, "goods":[ { "goodsName":"純手工制作木質(zhì)時(shí)鐘精致家具裝飾擺件", "pic":"images/cart_04.jpg", "price":89.00, "number":2, "checked":true }, { "goodsName":"木質(zhì)藍(lán)牙音箱包郵實(shí)木家具裝飾擺件", "pic":"images/cart_05.jpg", "price":189.00, "number":1, "checked":false } ] }, { "shopName":"紙來我往", "checked":true, "goods":[ { "goodsName":"純手工制作木質(zhì)時(shí)鐘精致家具裝飾擺件", "pic":"images/cart_06.jpg", "price":289.00, "number":3, "checked":true } ] } ]; //點(diǎn)擊加減按鈕,數(shù)量加減;點(diǎn)擊刪除按鈕,刪除商品 $scope.reduce=function(goods){ goods.number--; if (goods.number<=0) goods.number=0; $scope.totalMoney(); }; $scope.add=function(kind){ kind.number++; $scope.totalMoney(); }; $scope.delete=function(item,index){ item.goods.splice(index,1) }; /*總金額計(jì)算*/ $scope.totalMoney=function(){ var total=0; for(var i=0;i<$scope.cart.length;i++){ for(var j=0;j<$scope.cart[i].goods.length;j++){ if($scope.cart[i].goods[j].checked){ total+=$scope.cart[i].goods[j].price*$scope.cart[i].goods[j].number; } } } return total; }; /*商鋪選擇*/ $scope.shopChecked=function(item){ if(item.checked==true){ for(var i=0;i<item.goods.length;i++){ item.goods[i].checked=true } }else { for(var i=0;i<item.goods.length;i++){ item.goods[i].checked=false; } } }; /*全部選擇*/ $scope.allChecked=function(){ if($scope.allCheck){ for(var i=0;i<$scope.cart.length;i++){ $scope.cart[i].checked=true; for(var j=0;j<$scope.cart[i].goods.length;j++){ $scope.cart[i].goods[j].checked=true; } } }else { for(var i=0;i<$scope.cart.length;i++){ $scope.cart[i].checked=false; for(var j=0;j<$scope.cart[i].goods.length;j++){ $scope.cart[i].goods[j].checked=false; } } } }; }) </script> </head> <body ng-app="myapp" ng-controller="myCtrl"> <div><input type="checkbox" ng-model="allCheck" ng-click="allChecked()">總金額:<span>{{ totalMoney() | currency:"¥"}}</span></div> <div ng-repeat="item in cart" class="line"> <div><input type="checkbox" ng-model="item.checked" ng-click="shopChecked(item)"><span>{{item.shopName}}</span></div> <ul> <li ng-repeat="kind in item.goods"> <input type="checkbox" ng-model="kind.checked"><span>{{kind.goodsName}}</span> <p>{{kind.price}}</p> <p><span class="add" ng-click="add(kind)">+</span>{{kind.number}}<span class="reduce" ng-click="reduce(kind)">-</span></p> <p ng-click="delete(item,$index)">刪除</p> </li> </ul> </div> </body> </html>
以上是“angularjs怎么實(shí)現(xiàn)簡單的購物車功能”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對大家有所幫助,如果還想學(xué)習(xí)更多知識,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!
新聞標(biāo)題:angularjs怎么實(shí)現(xiàn)簡單的購物車功能
新聞來源:http://www.muchs.cn/article32/pgdgpc.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供自適應(yīng)網(wǎng)站、Google、搜索引擎優(yōu)化、微信小程序、服務(wù)器托管、ChatGPT
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)