angular.js實(shí)現(xiàn)購(gòu)物車功能
本文實(shí)例為大家分享了angular.js購(gòu)物車功能的具體代碼,供大家參考,具體內(nèi)容如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>購(gòu)物車</title> <script src="angularjs/angular.js"></script> <style> .box{ width: 100%; border-bottom: 1px solid silver; } .box1{ width: 100%; margin-top: 5px; } .box1 button{ width: 100px; height: 40px; background: crimson; color: white; text-align: center; line-height: 40px; float: right; border: 0; border-radius: 13px; } table{ width: 100%; } tr td button{ background: blue; color: white; border: 0; } </style> <script> var my=angular.module("my",[]); my.controller("mys",function ($scope) { /*聲明數(shù)據(jù)對(duì)象,初始化商品信息,數(shù)據(jù)自擬且不低于四條*/ $scope.arr=[ {name:"qq",price:12.9,number:2,state:false}, {name:"wx",price:23.9,number:1,state:false}, {name:"aa",price:99.9,number:1,state:false}, {name:"bb",price:10.9,number:5,state:false} ]; /*刪除條目*/ $scope.del=function (index) { if(confirm("確定移除此項(xiàng)嘛?")){ $scope.arr.splice(index,1); } } /*點(diǎn)擊”+”按鈕輸入框中的數(shù)量加1,同時(shí)可以計(jì)算出商品小計(jì),和購(gòu)物 車總價(jià)*/ $scope.jia=function (index) { $scope.arr[index].number++; } /*當(dāng)點(diǎn)擊”-”按鈕時(shí)輸入框中的數(shù)量減1,商品小計(jì)和總價(jià)*/ $scope.jian=function (index) { if($scope.arr[index].number>1){ $scope.arr[index].number--; } else if($scope.arr[index].number==1){ if(confirm("用戶是否刪除該商品")){ $scope.arr.splice(index,1); } } } /*計(jì)算總價(jià)格*/ $scope.allSum=function () { var allPrice=0; for(var i=0;i<$scope.arr.length;i++){ allPrice+=$scope.arr[i].price*$scope.arr[i].number; } return allPrice; }; /*清空購(gòu)物車*/ $scope.alldel=function () { if($scope.arr.length==0){ alert("您的購(gòu)物車已空"); }else{ $scope.arr=[]; } } /*用戶點(diǎn)擊第一個(gè)checkbox代表全選,全選商品后點(diǎn)擊刪除選中商品,選中商品被刪除, 若購(gòu)物車商品被全部刪除后*/ $scope.allCheck=false; $scope.allx= function () { for(var i=0;i<$scope.arr.length;i++){ if($scope.allCheck==true){ $scope.arr[i].state=true; }else { $scope.arr[i].state=false; } } }; /*每個(gè)復(fù)選框*/ $scope.itemCheck = function () { var flag = 0; for(var i = 0; i<$scope.arr.length; i++){ if($scope.arr[i].state == true){ flag ++; } } if(flag == $scope.arr.length){ $scope.allCheck = true; }else{ $scope.allCheck = false; } }; /*批量刪除*/ $scope.pi=function () { for(var i=0;i<$scope.arr.length;i++){ if($scope.arr[i].state==true){ $scope.arr.splice(i,1); i--; $scope.allCheck = false; } } } }); </script> </head> <body ng-app="my" ng-controller="mys"> <div class="box"> <h2>我的購(gòu)物車</h2> </div> <div class="box1"> <button ng-click="alldel()" style="margin-right: 10px">清空購(gòu)物車</button><button ng-click="pi()" style="margin-left: 5px">批量刪除</button> </div> <div class="box2"> <table border="1"> <tr> <th><input type="checkbox" ng-model="allCheck" ng-click="allx()"/></th> <th>name</th> <th>price</th> <th>number</th> <th>totalPrice</th> <th>option</th> </tr> <!--用ng-repaet指令將對(duì)象遍歷并渲染到頁(yè)面中--> <tr ng-repeat="item in arr"> <td><input type="checkbox" ng-model="item.state" ng-click="itemCheck()"/></td> <td>{{item.name}}</td> <td>{{item.price | currency:"¥:"}}</td> <td><button ng-click="jian($index)">-</button> <input type="text" value="{{item.number}}" style="width: 30px;padding-left: 20px"/> <button ng-click="jia($index)">+</button> </td> <td>{{item.price*item.number | currency:"¥:"}}</td> <td><button ng-click="del($index)">刪除</button></td> </tr> <tr> <td colspan="6">總金額<span ng-bind="allSum()|currency:'¥:'"></span></td> </tr> </table> </div> </body> </html>
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- 利用Angularjs和bootstrap實(shí)現(xiàn)購(gòu)物車功能
- 使用Angular.js實(shí)現(xiàn)簡(jiǎn)單的購(gòu)物車功能
- Angularjs 制作購(gòu)物車功能實(shí)例代碼
- Angular實(shí)現(xiàn)購(gòu)物車計(jì)算示例代碼
- angular和BootStrap3實(shí)現(xiàn)購(gòu)物車功能
- AngularJS 購(gòu)物車全選/取消全選功能的實(shí)現(xiàn)方法
- angularjs實(shí)現(xiàn)簡(jiǎn)單的購(gòu)物車功能
- AngularJS 實(shí)現(xiàn)購(gòu)物車全選反選功能
- AngularJs 終極購(gòu)物車(實(shí)例講解)
- Angular動(dòng)畫實(shí)現(xiàn)的2種方式以及添加購(gòu)物車動(dòng)畫實(shí)例代碼
相關(guān)文章
使用angular-cli webpack創(chuàng)建多個(gè)包的方法
這篇文章主要介紹了使用angular-cli webpack創(chuàng)建多個(gè)包的方法,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-10-10angular 表單驗(yàn)證器驗(yàn)證的同時(shí)限制輸入的實(shí)現(xiàn)
表單驗(yàn)證是經(jīng)常用到一個(gè)東西,這篇文章主要介紹了angular 表單驗(yàn)證器驗(yàn)證的同時(shí)限制輸入的實(shí)現(xiàn),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-04-04AngularJS實(shí)現(xiàn)與后臺(tái)服務(wù)器進(jìn)行交互的示例講解
今天小編就為大家分享一篇AngularJS實(shí)現(xiàn)與后臺(tái)服務(wù)器進(jìn)行交互的示例講解,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-08-08angularJs select綁定的model取不到值的解決方法
今天小編就為大家分享一篇angularJs select綁定的model取不到值的解決方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-10-10Angular使用 ng-img-max 調(diào)整瀏覽器中的圖片的示例代碼
本篇文章主要介紹了Angular使用 ng-img-max 調(diào)整瀏覽器中的圖片的示例代碼,具有一定的參考價(jià)值,有興趣的可以了解一下2017-08-08angular 未登錄狀態(tài)攔截路由跳轉(zhuǎn)的方法
今天小編就為大家分享一篇angular 未登錄狀態(tài)攔截路由跳轉(zhuǎn)的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-10-10