使用Angular.js實(shí)現(xiàn)簡(jiǎn)單的購(gòu)物車功能

更新時(shí)間：2016年11月21日 17:12:41 作者：騎著小豬來(lái)編程

在各大購(gòu)物網(wǎng)站大家都可以簡(jiǎn)單購(gòu)物車效果演示，下面通過(guò)本文給大家分享一段代碼關(guān)于使用Angular.js實(shí)現(xiàn)簡(jiǎn)單的購(gòu)物車功能，需要的朋友可以參考下

先給大家分享實(shí)現(xiàn)代碼，在代碼下面有效果圖展示，大家可以兩者結(jié)合參考下，廢話不多說(shuō)了，具體代碼如下所示：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="http://code.angularjs.org/1.2.5/angular.min.js"></script>
<style type="text/css">
td,th{
width: 150px;
text-align: left;
}
table{
width: 800px;
}
.num{
width: 70px;
text-align: center;
}
tr td:last-child button {
background-color: red;
}
#foot button{
background-color: red;
}
</style>
</head>
<!--ng-bind是從$scope -> view的單向綁定ng-modle是$scope <-> view的雙向綁定
{{}} 與 ng-bind 的區(qū)別是后者在加載時(shí)用戶不會(huì)看到渲染之前的東西,前者可能會(huì)看到,所以首頁(yè)一般用后者加載數(shù)據(jù)
-->
<body ng-app="myApp">
<div ng-controller="VC1">
<table border="" cellspacing="" cellpadding="">
<tr><th>產(chǎn)品編號(hào)</th><th>產(chǎn)品名稱</th><th>購(gòu)買數(shù)量</th><th>產(chǎn)品單價(jià)</th><th>產(chǎn)品總價(jià)</th><th>操作</th></tr>
<tr ng-repeat="x in Product" >
<td>{{x.id}}</td>
<td>{{x.name}}</td>
<td>
<button ng-click="reduce($index)">-</button>
<input type="text" class="num" ng-model="x.quantity" ng-change="change($index)" />
<button ng-click="add($index)">+</button> </td>
<td >{{x.price}}</td>
<td>{{x.price * x.quantity}}</td>
<td><button ng-click="remove($index)">移除</button></td></tr>
</table>
<div id="foot"><span>總價(jià):</span><span ng-bind="totalQuantity()"></span><span>購(gòu)買數(shù)量</span>
<span >{{numAll()}}</span> <button ng-click="removeAll()">清空購(gòu)物車</button> </div>
</div>
</body>
<script type="text/javascript">
var app = angular.module("myApp",[]);
app.controller("VC1",function($scope){
$scope.Product = [{
id: 1000,
name: "iPhone8",
quantity: 1,
price: 8888
}, {
id: 1001,
name: "iPhone9",
quantity: 1,
price: 9888
}, {
id: 1002,
name: "iPhone 2s",
quantity: 1,
price: 3888
}, {
id: 1003,
name: "iPhone 7P+",
quantity: 1,
price: 10088
}];
//減少數(shù)量
$scope.reduce = function(index){
if( $scope.Product[index].quantity > 1){
$scope.Product[index].quantity--;
}else{
$scope.remove(index);
}
}
//添加數(shù)量函數(shù)
$scope.add = function(index){
$scope.Product[index].quantity++;
}
//所有商品總價(jià)函數(shù)
$scope.totalQuantity = function(){
var allprice = 0
for(var i = 0 ; i <$scope.Product.length;i++ ){
allprice += $scope.Product[i].quantity * $scope.Product[i].price;
}
return allprice;
}
//購(gòu)買總數(shù)量函數(shù)
$scope.numAll = function(){
var numAlls = 0
for(var i = 0 ; i <$scope.Product.length;i++ ){
numAlls += $scope.Product[i].quantity;
}
return numAlls;
}
//刪除當(dāng)前商品
$scope.remove = function(index){
if(confirm("確定要清空數(shù)據(jù)嗎")){
$scope.Product.splice(index,1)
}
}
//清空購(gòu)物車
$scope.removeAll = function(){
if(confirm("你確定套清空購(gòu)物車所有商品嗎?")){
$scope.Product = [];
}
}
//解決輸入框輸入負(fù)數(shù)時(shí)變?yōu)?
$scope.change = function(index){
if ( $scope.Product[index].quantity >= 1) {
}else{
$scope.Product[index].quantity = 1;
}
}
$scope.$watch('Product',function(oldvalue,newvalue){
console.log(oldvalue);
console.log(newvalue);
})
})
</script>
</html>

效果圖展示如下：

以上所述是小編給大家介紹的使用Angular.js實(shí)現(xiàn)簡(jiǎn)單的購(gòu)物車功能，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: