![]()
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>日考19</title>
<script type="text/javascript" src="js/angular.js" ></script>
<script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
<script>
var app = angular.module("myapp",[]);
app.controller("mycon",function($scope){
//設置總和
$scope.sum = 0;
var shu = 0;
//設置數據
$scope.good = [{
"name":"純手工製作木質時鐘精緻傢俱裝飾擺件",
"price":"150.00",
"count":shu,
"flas":false
},{
"name":"木質藍牙音箱包郵實木傢俱裝飾擺件",
"price":"150.00",
"count":shu,
"flas":false
},{
"name":"裝飾木雕,獨特趣味設計傢俱裝飾擺件",
"price":"150.00",
"count":shu,
"flas":false
}];
//減的點擊事件
$scope.jianjian = function($index){
var cc=$scope.good[$index].count;
if(cc == 0){
alert("沒有的");
return;
}
//設置變量接受方便的值
var cc1 = cc - 1;
//賦回去
$scope.good[$index].count = cc1;
};
//加的點擊事件
$scope.jiajia = function($index) {
//獲取數量
var cc = $scope.good[$index].count;
//設置變量接受方便的值
var cc1 = cc + 1;
//賦回去
$scope.good[$index].count = cc1;
};
//刪除
$scope.dele = function($index) {
//取出刪除的對象
var aa = $scope.good.splice($index, 1);
//用總和減去刪掉的價格
$scope.sum = $scope.sum - aa[$index].price * aa[$index].count;
};
//單選
$scope.ss = function($index) {
//獲取flas 初始值是false
if($scope.good[$index].flas == false) {
//scope.good[$index].flas賦爲true
$scope.good[$index].flas = true;
// 取出數量+價格 賦給總合
$scope.sum = $scope.sum + $scope.good[$index].count * $scope.good[$index].price;
} else {
//沒單選，綜合歸0
$scope.sum = 0;
//scope.good[$index].false
$scope.good[$index].flas = false;
}
};
//全選
$scope.quxuan = function() {
//獲取全選的MODLE值
var tt = $scope.flas2;
//賦給單選框
$scope.flas = tt;
//是true
if($scope.flas) {
//綜合歸0
$scope.sum = 0;
//便利
for(var i = 0; i < $scope.good.length; i++) {
// 取出數量+價格
var shu = $scope.good[i].count;
var prices = $scope.good[i].price;
//賦給總合
$scope.sum = $scope.sum + shu * prices;
}
} else {
//沒全選，綜合歸0
$scope.sum = 0;
}
//全選之後的刪除
$scope.dele = function($index) {
//取出刪除的對象
var aa = $scope.good.splice($index, 1);
//用總和減去刪掉的價格
$scope.sum = $scope.sum - aa[$index].price * aa[$index].count;
}
}
})
</script>
</head>
<body ng-app="myapp" ng-controller="mycon">
<h3>購物車</h3>
<hr style="width: 400px; " align="left" />
<input type="checkbox" id="tabbox" />趣藝工坊
<hr style="width: 400px; " align="left" />
<div>
<table ng-repeat="g in good">
<tr>
<td><input type="checkbox" ng-checked="flas2" ng-click="ss($index)" ng-model="ff" /></td>
<td>
<img src="img/b.png"/>
</td>
<td>
<h6>{{g.name}}</h6>
<h6>{{g.price | currency:"￥"}}</h6>
<input type="button" value="-" ng-click="jianjian($index)" /> {{g.count}}
<input type="button" value="+" ng-click="jiajia($index)" />
<a href="#" ng-click="dele($index)">刪除</a>
</td>
</tr>
</table>
</div>
<hr style="width: 400px; " align="left" />
<input type="checkbox" ng-click="quxuan()" ng-model="flas2" />全選 合計:
<span ng-model="sum">{{sum|currency:"￥"}}</span>
<input type="button" value="結算" />
</body>
</html>
