第AngularJs終極購(gòu)物車(chē)(實(shí)例講解)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)物車(chē)總價(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].number1){

$scope.arr[index].number--;

elseif($scope.arr[index].number==1){

if(confirm("用戶是否刪除該商品")){

$scope.arr.splice(index,1);

/*計(jì)算總價(jià)格*/

$scope.allSum=function(){

varallPrice=0;

for(vari=0;i$scope.arr.length;i++){

allPrice+=$scope.spanstrongarr/strong/span[spani/span].spanstrongprice/strong/span*$scope.arr[i].number;

returnallPrice;

/*清空購(gòu)物車(chē)*/

$scope.alldel=function(){

if($scope.arr.length==0){

alert("您的購(gòu)物車(chē)已空");

}else{

$scope.arr=[];

/*用戶點(diǎn)擊第一個(gè)checkbox代表全選，全選商品后點(diǎn)擊刪除選中商品，選中商品被刪除，若購(gòu)物車(chē)商品被全部刪除后*/

$scope.allCheck=false;

$scope.allx=function(){

for(vari=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(){

varflag=0;

for(vari=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(vari=0;i$scope.arr.length;i++){

if($scope.arr[i].state==true){

$scope.arr.splice(i,1);

i--;

$scope.allCheck=false;

/script

/head

bodyng-app="my"ng-controller="mys"

div

h2我的購(gòu)物車(chē)/h2

/div

div

buttonng-click="alldel()"清空購(gòu)物車(chē)/buttonbuttonng-click="pi()"批量刪除/button

/div

div

tableborder="1"

thinputtype="checkbox"ng-model="allCheck"ng-click="allx()"http://th

thname/th

thprice/th

thnumber/th

thtotalPrice/th

thoption/th

/tr

!--用ng-repaet指令將對(duì)象遍歷并渲染到頁(yè)面中--

trng-repeat="iteminarr"

tdinputtype="checkbox"ng-model="item.state"ng-click="itemCheck()"http://td

td{{}}/td

td{{item.price|currency:"￥："}}/td

tdbuttonng-click="jian($index)"-/button

inputtype="text"value="{{item.number}}"/

buttonng-click="jia($index)"+/button

/td

td{{item.price*item.number|currency:"￥："}}/td

tdbuttonng-click="del($index)"刪除/button/td

/tr

tdcolspan="6"總金額spanng-bind="allSum()