angularjs購物車練習

阿新 • • 發佈：2017-07-12

charset lis copyto ima $watch trap dom val sta

本文是一個簡單的購物車練習，功能包括增加、減少某商品的數量，從而影響該商品的購買總價以及所有商品的購買總價；從購物車內移除一項商品；清空購物車。

頁面效果如圖：

技術分享

若使用js或jQuery來實現這個頁面，會需要綁定很多事件，如減少數量按鈕事件，增加數量按鈕事件，移除某項商品事件，清空購物車事件，而這些事件之中很多代碼很重復，比如計算某項商品的總購買價，計算所有商品的購買總價，不勝其煩，現在有了AngularJS，則簡單許多，因為數據模型雙向綁定等原因。

上圖頁面的代碼：

html

[html] view plain copy

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>angular購物車練習</title>
<link rel="stylesheet" href="../../vendor/bootstrap3/css/bootstrap.css">
<script src="../../vendor/angular/angular.min.js"></script>
<script src="app/index2.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<div class="container">
<table class="table" ng-show="cartList.length > 0">
<thead>
<tr>
<th>產品編號</th>
<th>產品名稱</th>
<th>購買數量</th>
<th>產品單價</th>
<th>產品總價</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in cartList">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>
<button ng-click="reduceOne(item.id)" class="btn btn-primary">-</button>
<input type="text" ng-model="item.quantity">
<button ng-click="addOne(item.id)" class="btn btn-primary">+</button>
</td>
<td>{{item.price}}</td>
<td>{{item.quantity * item.price}}</td>
<td><button ng-click="remove(item.id)" class="btn btn-danger">移除</button></td>
</tr>
<tr>
<td>總購買價</td>
<td>{{totalCost()}}</td>
<td>總購買數量</td>
<td>{{totalCount()}}</td>
<td colspan="3"><button ng-click="cartList=[]" class="btn btn-danger">清空購物車</button></td>
</tr>
</tbody>
</table>
<h4 ng-show="cartList.length < 1">您的購物車暫無商品</h4>
</div>
</body>
</html>

index2.js :

[javascript] view plain copy

var app=angular.module("myApp",[]);
app.controller("myCtrl",function($scope){
$scope.cartList=[
{id:1000,name:"iphone5s",quantity:3,price:4300},
{id:1001,name:"iphone5",quantity:30,price:3300},
{id:1002,name:"imac",quantity:3,price:3000},
{id:1003,name:"ipad",quantity:5,price:6900}
];
var findIndex=function(id){
var index=-1;
angular.forEach($scope.cartList,function(item,key){
if(item.id == id){
index=key;
return;
}
});return index;
};
//從cartList數組中刪除一項產品
$scope.remove=function(id){
var index=findIndex(id);
if(index != -1){
$scope.cartList.splice(index,1);
}
};
//為某個商品添加一個數量
$scope.addOne=function(id){
var index=findIndex(id);
if(index != -1){
$scope.cartList[index].quantity ++;
}
};
//位某個商品減少一個數量
$scope.reduceOne=function(id){
var index=findIndex(id);
if(index != -1){
var item=$scope.cartList[index];
if(item.quantity > 1){
item.quantity --;
}else{
var returnKey=confirm("刪除該商品？");
if(returnKey){
$scope.remove(item.id);
}
}
}
};
//總購買價
$scope.totalCost=function(){
var total=0;
angular.forEach($scope.cartList,function(item,key){
total += item.quantity * item.price;
});return total;
};
//總購買數量
$scope.totalCount=function(){
var count=0;
angular.forEach($scope.cartList,function(item,key){
count += item.quantity;
});return count;
};
//監聽輸入框更改事件避免輸入負數或字符串
$scope.$watch(‘cartList‘,function(newValue,oldValue){
console.log( "$scope.cartList === newValue "+ ($scope.cartList === newValue) ); //永遠為ture newValue指向cartList
console.log( "$scope.cartList === oldValue "+ ($scope.cartList === oldValue) ); //頁面初始化後為true 一旦改動永遠為false
angular.forEach(newValue,function(item,key){
if( isNaN(item.quantity) ){
item.quantity=oldValue[key].quantity;
}
else if( item.quantity <= 0 ){
var returnKey=confirm("刪除該商品？");
if(returnKey){
$scope.remove(item.id);
}else{
item.quantity=oldValue[key].quantity;
}
}
});
},true);
});

頁面中的指令：

ng-app         指定一個應用程序

ng-controller  指定一個控制器

ng-show        值表達式為 true 時，顯示本Dom

ng-repeat      重復本Dom

ng-click       指定一個單擊事件

angularjs購物車練習

charset lis copyto ima $watch trap dom val sta 本文是一個簡單的購物車練習，功能包括增加、減少某商品的數量，從而影響該商品的購買總價以及所有商品的購買總價；從購物車內移除一項商品；清空購物車。頁面效果如圖：

angularjs購物車練習

angularjs購物車練習

angularJS 購物車練習

購物車練習

Python學習第二周-簡易購物車練習

vue 購物車練習

“購物車”練習

Python 購物車練習 2.0

jsjqueryangular購物車練習

angularJs購物車--（賣藥）

angularjs購物車，排序，篩選，全選，刪除，確認是否刪除

AngularJS--購物車全選/取消全選功能實現

第一個AngularJS Demo（購物車）

angularJS可以實現常常看到購物車中的升序降序效果

Python 練習1——簡易購物車

Python初學時購物車程序練習實例

python（4）- 簡單練習：python實現購物車的優化

程序練習2：購物車程序

購物車程序練習

Python 練習：簡單的購物車(二)

【練習】購物車程序

angularjs購物車練習

相關推薦