<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script>
<body ng-app="myapp" ng-controller="mycontroller">
<input type="checkbox" />奇趣工坊
<hr/>
<div ng-repeat="good in goods">
<table>
<tr>
<td>
<input type="checkbox" ng-checked="flas2" ng-click="ss($index)" ng-model="ff" />
</td>
<td>
<img src="img/a15.png" />
</td>
<td>
<h6>{{good.sname}}</h6>
<h6>{{good.sprice|currency:"¥"}}</h6>
<input type="button" value="-" ng-click="jianjian($index)" /> {{good.scount}}
<input type="button" value="+" ng-click="jiajia($index)" />
<a href="#" ng-click="dele($index)">删除</a>
</td>
</tr>
</table>
<hr/>
</div>
<input type="checkbox" ng-click="quxuan()" ng-model="flas2" />全选 合计:
<span ng-model="sum">{{sum|currency:"¥"}}</span>
<input type="button" value="结算" />
</body>
<script type="text/javascript">
var mo = angular.module("myapp", []);
mo.controller("mycontroller", function($scope) {
//总合
$scope.sum = 0;
var sl = 0; //设置的数量
$scope.goods = [{
"sname": "手办",
"sprice": "150",
"scount": sl,
"flas": false
}, {
"sname": "手办",
"sprice": "150",
"scount": sl,
"flas": false
}, {
"sname": "手办",
"sprice": "150",
"scount": sl,
"flas": false
}]
//减的点击事件
$scope.jianjian = function($index) {
//获取数量
var cc = $scope.goods[$index].scount;
if (cc == 0) {
alert("没有的")
return;
}
//设置变量接受方便的值
var cc1 = cc - 1;
//赋回去
$scope.goods[$index].scount = cc1;
}
//加的点击事件
$scope.jiajia = function($index) {
//获取数量
var cc = $scope.goods[$index].scount;
//设置变量接受方便的值
var cc1 = cc + 1;
//赋回去
$scope.goods[$index].scount = cc1;
}
//删除
$scope.dele = function($index) {
//取出删除的对象
var aa = $scope.goods.splice($index, 1);
//用总和减去删掉的价格
$scope.sum = $scope.sum - aa[$index].sprice * aa[$index].scount;
}
//单选
$scope.ss = function($index) {
//获取flas 初始值是false
if ($scope.goods[$index].flas == false) {
//scope.goods[$index].flas赋为true
$scope.goods[$index].flas = true;
// 取出数量+价格 赋给总合
$scope.sum = $scope.sum + $scope.goods[$index].scount * $scope.goods[$index].sprice;
} else {
//没单选,综合归0
$scope.sum = 0;
//scope.goods[$index].false
$scope.goods[$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.goods.length; i++) {
// 取出数量+价格
var shu = $scope.goods[i].scount;
var price = $scope.goods[i].sprice;
//赋给总合
$scope.sum = $scope.sum + shu * price;
}
} else {
//没全选,综合归0
$scope.sum = 0;
}
//删除
$scope.dele = function($index) {
//取出删除的对象
var aa = $scope.goods.splice($index, 1);
//用总和减去删掉的价格
$scope.sum = $scope.sum - aa[$index].sprice * aa[$index].scount;
}
}
})
</script>
</html>
模拟购物车(angular)
最新推荐文章于 2019-06-11 15:57:18 发布