防购物车特效
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>