angular 防購物車特效
阿新 • • 發佈：2017-05-10
cli var 個數 對象 特效 pan 移除 總計 循環
防購物車特效
app.controller("ctrl",function($scope,getDate){
getDate.then(function(res){
$scope.data=res.data;
console.log($scope.data)
});
/* 清空購物車*/
$scope.del=function(){
$scope.data=[]
};
/* 計算總價*/
$scope.conprice=function(){
var conprice=0;
angular.forEach($scope.data,function(elem){
conprice+=(elem.count*elem.price)
});
return conprice
};
/* 計算總數量*/
$scope.connum=function(){
var connum=0;
angular.forEach($scope.data,function(elem){ //用forEach遍歷
connum+=(elem.count)
});
return connum
};
/* $scope.connum=function(){
var connum=0;
for(i=0;i<$scope.data.length;i++){ //用for循環h遍歷
connum+=parseInt($scope.data[i].count)
}
return connum
};*/
/* 點擊單行刪除*/
/* 方法1 有些弊端對於排序後的$index會改變影響效果*/
/* $scope.delete=function ($index) {
// console.log($index);
$scope.data.splice($index,1)
};*/
/*方法2*/
$scope.delete=function(data){
var id=data.elem.id;
console.log(id);
angular.forEach($scope.data,function(elem,$index){ //遍歷$scope.data（數組），參數elem就是從數組遍歷出來啊的一個對象
// console.log(elem) 第二個參數 $index代表object的下標（index）
if(elem.id==id){
$scope.data.splice($index,1)
}
})
};
/* 點擊按鈕減少數量 */
$scope.scnum=function($index){
// console.log( $scope.data[$index])//獲取到的是數組裏的某一個object
// console.log($scope.data) //獲取到的是一個數組
$scope.data[$index].count--;
if( $scope.data[$index].count<=0){
if(confirm("確認移除此產品嗎")){
$scope.data.splice($index,1)
}else{
$scope.data[$index].count=1;
}
}
};
/* 點擊按鈕增加數量*/
$scope.crenum=function($index){
console.log( $scope.data[$index]);
$scope.data[$index].count++
};
/* orderBy排序包括其它過濾器都只在原本json數據就存在的情況下才能起作用 表頭中單行的產品總價是通過數量*單價計算出來的json數據中並沒有給出
所以我們要自己創建一個 用sum表示*/ /*此時打印出json數據 裏面每一個object對象都增加了一個sum*/
$scope.flag2=false;
$scope.sum=function(data){
angular.forEach($scope.data,function(elem,$index){
elem.sum=elem.count*elem.price;
// console.log(elem.sum)
});
$scope.flag2=true;
$scope.flag=false;
$scope.flag1=false;
$scope.data1="sum"
};
/* 點擊進行排序箭頭*/
$scope.flag=false;
$scope.flag1=false;
$scope.flag2=false;
$scope.order=function(num){
if(num==0){
$scope.flag=true;
$scope.flag1=false;
$scope.flag2=false;
$scope.data1=‘price‘
}
else if(num==1){
$scope.flag1=true;
$scope.flag=false;
$scope.flag2=false;
$scope.data1=‘id‘
}
};
});
html 部分
<style>
.selected{
color: red;
}
</style>
</head>
<body ng-app="myApp">
<table class="table table-bordered" ng-controller="ctrl">
<thead>
<tr>
<th ng-class="{‘selected‘:flag}" ng-click="order(0)">產品編號 <span class="caret"></span></th>
<th ng-class="{‘selected‘:flag4}" ng-click="order(4)">產品名稱 <span class="caret" ></span></th>
<th ng-class="{‘selected‘:flag1}" ng-click="order(1)">購買數量 <span class="caret" ></span></th>
<th ng-class="{‘selected‘:flag2}" ng-click="order(2)">產品單價 <span class="caret" ></span></th>
<th ng-class="{‘selected‘:flag3}" ng-click="order(3)">產品總價 <span class="caret" ></span></th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="elem in data|orderBy:data1">
<td>{{elem.id}}</td>
<td ng-bind="elem.name"></td>
<td>
<button class="btn btn-info" ng-click="lesscount(this)">-</button>
<input type="number" ng-model="elem.count"/>
<button class="btn btn-info" ng-click="crecount(this)">+</button>
</td>
<td>{{elem.price}}</td>
<td>{{elem.price*elem.count}}</td>
<td><button class="btn btn-warning" ng-click="delete(this)">刪除</button></td>
</tr>
<tr>
<td>總計</td>
<td></td>
<td>總數量 <span>{{connum()}}</span></td>
<td>總價 <span ng-bind="conprice()"></span></td>
<td></td>
<td ><button class="btn btn-warning" ng-click="del()">清空購物車 </button></td>
</tr>
</tbody>
</table>
</body>
angular 防購物車特效