购物车,计算价格,tian

来源：互联网发布：从概念到数据分析 pdf 编辑：程序博客网时间：2024/06/11 19:55

<!doctype html>
<html ng-app="myApp">

<head>
<meta charset="utf-8">
<title>仁</title>
<style>
.cursors {
cursor: pointer
}
</style>
<script src="js/jquery-2.1.0.js"></script>
<script src="js/angular.js"></script>

<script>
var A = angular.module('myApp', []);
//购物车加
A.directive('myAdds', function() {
return {
link: function(scope, element, attr) {
element.click(function() {
var This = this
angular.forEach(scope.dataList, function(data, index, array) {
if(attr.items == data.items) {
data.num = parseInt(data.num) + 1;
scope.allPrices();
scope.$apply() //刷新视图
}

});
});
}
}
})
//购物车减
A.directive('myMinus', function() {
return {
link: function(scope, element, attr) {
element.click(function() {
var This = this
angular.forEach(scope.dataList, function(data, index, array) {

if(attr.items == data.items) {

if(data.num <= 1) {

if(confirm('是否删除该产品')) {
data.num = 0;
$(This).siblings('input').val(0);
scope.allPrices();
scope.$apply();
//delete array[index];
scope.dataList.splice(index, 1)
$(This).parents('tr').remove();
}

} else {
data.num = parseInt(data.num) - 1;
};

scope.allPrices();
scope.$apply();
}
});
});
}
}
})
//全选，全不选
A.directive('allOrcan', function() {
return function(scope, element, attr) {
element.click(function() {
var isCheck = $(this).find('input').prop('checked');
if(isCheck) {
$('input[type=checkbox]').prop('checked', true);
} else {
$('input[type=checkbox]').not($('input[type=checkbox]').eq(0)).prop('checked', false);
}
angular.forEach(scope.dataList, function(data, index, array) {
data.Bol = isCheck;
})
scope.allPrices();
scope.$apply();
})
}
})
//单选
A.directive('oneCheck', function() {
return function(scope, element, attr) {
element.click(function() {
var This = this
angular.forEach(scope.dataList, function(data, index, array) {
if(attr.items == data.items) {
var isCheck = $(This).prop('checked');
data.Bol = isCheck;
scope.allPrices();
scope.$apply();
}
})
});
}
})

A.controller('myAngular', ['$scope', '$filter', function($scope, $filter) {
$scope.dataList = [ //初始化购物车的数据
{
Bol: 'false',
name: '雪糕',
num: '1',
items: '0',
oneprice: '12.9',
price: ''
},
{
Bol: 'false',
name: '苹果',
num: '1',
items: '1',
oneprice: '23.9',
price: ''
},
{
Bol: 'false',
name: '橘子',
num: '1',
items: '2',
oneprice: '99.9',
price: ''
}

];
//总价格的计算
$scope.allPrices = function() {
$scope.allprice = 0;
angular.forEach($scope.dataList, function(data, index, array) {
data.price = data.num * data.oneprice;
if(data.Bol == true) {
$scope.allprice += parseInt(data.price);
}
})

return $scope.allprice;
};

//按单价排序
$scope.CartSort = function(arg) {
angular.forEach($scope.dataList, function(data, index, array) {
arguments.callee['CartSort(' + arg + ')'] = !arguments.callee['CartSort(' + arg + ')']
$scope.dataList = $filter('orderBy')($scope.dataList, arg, arguments.callee['CartSort(' + arg + ')'])
})

}
//删除产品
$scope.delProduct = function(name){
alert(name);
if(name!=""){
if(confirm("是否删除"+name+"商品") ){
var p;
for (index in $scope.dataList) {
p = $scope.dataList[index];
if(p.name == name){
$scope.dataList.splice(index,1);
}
}
}
}
}

//清空购物车
$scope.removeAll = function(){
if(confirm("你确定要清空购物车所有商品吗?")){
$scope.dataList = [];
}
}

}])
</script>
</head>

<body ng-controller="myAngular">
<center>
<h1>我的购物车</h1>
        
        
        
        
        
        
        
        
        
        
<input type="button" value="清空购物车" ng-click="removeAll()" style="background: chocolate;" border="1"/>

<table border="1">
<tr>
<td><label all-orcan><input type="checkbox">全选/取消全选 </label></td>
<td>name</td>
<td ng-click='CartSort("oneprice")'>price</td>
<td>number</td>
<td>totalprice</td>
<td>option</td>
</tr>
<tr ng-repeat="data in dataList">
<td><input type="checkbox" one-check items={{data.items}}></td>
<td ng-cloak>{{data.name}}</td>

<td ng-cloak>{{data.oneprice | currency}}</td>
<td><input type="button" value="+" my-adds items="{{data.items}}" ng-class="{cursors:true}" style="background: darkorchid;"/>
<input type="text" ng-cloak ng-model="data.num" items="{{data.items}}" style="width:50px;text-align:center;">
<input type="button" value="-" my-minus items="{{data.items}}" ng-class="{cursors:true}" style="background: darkorchid;"/>
　</td>
<td ng-cloak>{{data.price | currency}}</td>

<td><input type="button" value="删除" ng-click="delProduct(data.name)" style="background: darkorchid;" /></td>
</tr>

</table>
<div>总价格：{{allPrices() | currency}}</div>
</center>
</body>

</html>

阅读全文

0 0