dddhhhfff
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="wenjian/angular-1.5.5/angular.js"></script>
<script>
var app = angular.module("myApp",[]);
app.controller("myCtrl",function ($scope) {
$scope.goods= [{
check:false,
name:"QQ",
price:"18.90",
number:1,
totaiprice:"18.90"
},
{check:false,
name:"WW",
price:"23.90",
number:1,
totaiprice:"23.90"
},
{check:false,
name:"EE",
price:"9.90",
number:1,
totaiprice:"9.90"
},
{check:false,
name:"RR",
price:"5.90",
number:1,
totaiprice:"5.90"
}]
//+ -
$scope.jia = function (x,y) {
for (i = 0; i < $scope.goods.length; i++) {
var a = $scope.goods[i];
if (a.name == x) {
a.number = a.number + y;
if (a.number<0) {
$scope.goods.splice(i, 1);
}
}
}
}
//刪除
$scope.jiao = function (x,y) {
for (i = 0; i < $scope.goods.length; i++) {
var a = $scope.goods[i];
if (a.name == x) {
var r=confirm("您是否將商品移除購物車？");
if (r==true){
$scope.goods.splice(i, 1);
}
}
}
}
//清空購物車
$scope.toggle = function () {
$scope.myVar = !$scope.myVar;
$scope.all=0;
$scope.myVar1 = !$scope.myVar1;
}
//全選
$scope.selectAllFun = function (x) {
if(x){
$scope.all=0;
for(i in $scope.goods){
$scope.goods[i].check=true;
$scope.all += $scope.goods[i].price * $scope.goods[i].number;
}
}else{
for(i in $scope.goods){
$scope.goods[i].check=false;
$scope.all=0;
}
}
}
//總價 反選
$scope.all=0;
$scope.zz = function (x,y) {
if (x){
$scope.all += y;
} else {
$scope.all -= y;
}
}
$scope.b =function () {
var flag = false;
for(index in $scope.goods){
if($scope.goods[index].check){
flag = true;
}else{
flag = false;
break;
}
}
//至少有一個沒有被選中
if(flag){
$scope.ccccc = true;
}else{
$scope.ccccc = false;
}
}
});
</script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<div style="margin: 0 auto; width: 500px">
<h1>我的購物車</h1>
<hr>
<p></p>
<div style="text-align:right;">
<button style="background: red; "ng-click="toggle()" ng-if="!myVar">
清空購物車
</button>
</div>
<div ng-if="myVar1">
您的購物車爲空，<a href="http://www.taobao.com" style="text-decoration: none">去逛商場</a>
</div>
<div ng-if="!myVar">
注：當number<0時，將會自動刪除商品！！！
</div>
<table border="1px soild" cellpadding="10px" cellspacing="0" ng-model="tab" ng-if="!myVar">
<tr>
<td><input type="checkbox" ng-model="$parent.ccccc" ng-click="selectAllFun(ccccc)"></td>
<th>name</th>
<th>price</th>
<th>number</th>
<th>totaiprice</th>
<th>option</th>
</tr>
<tr ng-repeat="i in goods">
<td><input type="checkbox" ng-model="i.check" ng-click="zz(i.check,i.price*i.number)" ng-change="b()"></td>
<td>{{i.name}}</td>
<td>{{i.price|currency:"￥"}}</td>
<td><button style="background:blue;" ng-click="jia(i.name,-1)">-</button><input type="text" style="width:20px;" ng-model="i.number"><button style="background:blue;"ng-click="jia(i.name,1)" >+</button></td>
<td>{{i.price*i.number| currency:"￥"}}</td>
<td><button style="background:blue;" ng-click="jiao(i.name,0)">刪除</button></td>
</tr>
<tr>
<td colspan="6">總價:{{ all | currency:"￥"}}</td>
</tr>
</table>
</div>
</body>
</html>
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
【網頁】如何下載網頁中mathplayer插件中的pdf文件
1、右鍵網頁——查看網頁源代碼 2、找到源碼中的pdf文件並點擊進去 3、在pdf瀏覽頁面中選中全部頁面：右鍵——答應打印 4、點擊更改 5、點擊另存爲pdf 6、最後再返回點擊保存即可
網頁製作--hover
要求：鼠標浮在某一鏈接時顯示其內容 一、代碼： 二、網頁效果 三、總結 設置行高: line-height:30px; 設置字體間距：word-spacing:15px; 設置首行縮進：line-in