html>
<html ng-app="ShopApp">
<head lang="en">
<meta charset="UTF-8">
<script type="text/javascript" src="angular-1.3.0.js">script>
<title>title>
<style>
table{
width: 600px;
border-top: solid 1px #000000;
border-left: solid 1px #000000;
}
table td{
border-bottom: solid 1px #000000;
border-right: solid 1px #000000;
}
#jianhao{
background-color: #007aff;
}
#jiahao{
background-color: #007aff;
}
#waibox{
width: 600px;
}
#qinchugouwuche{
background-color: red;
}
#arr_num{
width: 20px;
}
#shanchuanniu{
background-color: #007aff;
}
style>
<script type="text/javascript">
var ap = angular.module("ShopApp",[]);
ap.controller("ShopCtrl",function($scope){
$scope.arr = [{nms:"qq",prices:12.9,nums:3,isno:false},
{nms:"wx",prices:23.9,nums:4,isno:false},
{nms:"wx",prices:99.9,nums:5,isno:false}
];
$scope.arr2 = [{nms:"qq",prices:12.9,nums:3,isno:false},
{nms:"wx",prices:23.9,nums:4,isno:false},
{nms:"wx",prices:99.9,nums:5,isno:false}
];
$scope.biaoge = true;
$scope.jian = function(index){
if($scope.arr[index].nums==1){
if(confirm("您是否将该商品移除购物车")){
$scope.arr.splice(index,1);
zongjia();
if($scope.arr.length==0){
$scope.biaoge = false;
$scope.weikong = true;
}
}else{
$scope.arr[index].nums = $scope.arr2[index].nums;
zongjia();
}
}else{
$scope.arr[index].nums--;
zongjia();
}
}
$scope.jia = function(index){
$scope.arr[index].nums++;
zongjia();
}
$scope.shanchudange = function(index){
if(confirm("您是否将该商品移除购物车")){
$scope.arr.splice(index,1);
$scope.arr2.splice(index,1);
zongjia();
if($scope.arr.length==0){
$scope.biaoge = false;
$scope.weikong = true;
}
}
}
$scope.zong = $scope.arr[0].prices*$scope.arr[0].nums+$scope.arr[1].prices*$scope.arr[1].nums+$scope.arr[2].prices*$scope.arr[2].nums;
$scope.selectAll = function(sele){
for(var i=0;i<$scope.arr.length;i++){
$scope.arr[i].isno = sele;
}
}
$scope.qingsuoyou = function(){
/*if($scope.selectA){
if(confirm("确认全删")){
$scope.arr=[];
$scope.arr=[];
zongjia();
}
}else{
alert("请选中全选后删除");
}*/
var flag = true;
for(var i = 0;i<$scope.arr.length;i++){
if($scope.arr[i].isno == true){
$scope.arr.splice(i,1);
$scope.arr2.splice(i,1);
flag=false;
i--;
zongjia();
}
}
if(flag){
alert("请勾选条目");
}
if($scope.arr.length==0){
$scope.biaoge = false;
$scope.weikong = true;
}
}
var zongjia = function(){
$scope.zong = 0;
for(var i=0;i<$scope.arr.length;i++){
$scope.zong+=$scope.arr[i].prices*$scope.arr[i].nums;
}
}
});
script>
head>
<body ng-controller="ShopCtrl">
<h1>我的购物车h1>
<span ng-show="weikong">您的购物车为空<a href="#">去逛商场a>span>
<div id="waibox" ng-show="biaoge">
<div>
<input type="button" value="清除购物车" style="float: right" id="qinchugouwuche" ng-click="qingsuoyou()">
div>
<table>
<thead>
<tr>
<td><input type="checkbox" ng-model="selectA" ng-click="selectAll(selectA)">td>
<td>nametd>
<td>pricetd>
<td>numbertd>
<td>totalPricetd>
<td>optiontd>
tr>
thead>
<tbody>
<tr ng-repeat="ar in arr">
<td><input type="checkbox" ng-model="ar.isno">td>
<td>{{ar.nms}}td>
<td>{{ar.prices|currency:"￥:"}}td>
<td><input type="button" value="-" id="jianhao" ng-click="jian($index)">
<input type="text" ng-model="ar.nums" id="arr_num">
<input type="button" value="+" id="jiahao" ng-click="jia($index)">td>
<td>{{ar.prices*ar.nums|currency:"￥:"}}td>
<td><input type="button" value="删除" id="shanchuanniu" ng-click="shanchudange($index)">td>
tr>
<tr>
<td colspan="6">总价为:{{zong|currency:"￥:"}}td>
tr>
tbody>
table>
div>
body>
html>
