angular淘宝购物车案例

此篇文章是纯angular来实现淘宝购物车的案例，此案例是在网上下载之后我自己又重新修改的，有冒犯的，请见谅。话不多说，首先，来看看HTML结构

<div class="catbox" ng-app="myApp" ng-controller="myCart">

　　<table id="cartTable">
　　　　<thead>
　　　　　　<tr>
　　　　　　　　<th><label><input class="check-all check" type="checkbox" ng-click="checkAll()" ng-model="all"/>&nbsp;全选</label></th>
　　　　　　　　<th>商品</th>
　　　　　　　　<th>单价</th>
　　　　　　　　<th>数量</th>
　　　　　　　　<th>小计</th>
　　　　　　　　<th>操作</th>
　　　　　　</tr>
　　　　</thead>
　　　　<tbody>
　　　　　　<tr ng-repeat="c in cartList">
　　　　　　　　<td class="checkbox"><input class="check-one check" type="checkbox" ng-model="c.check" /></td>
　　　　　　　　<td class="goods"><img src="{{c.image}}" alt=""/><span>{{c.name}}</span></td>
　　　　　　　　<td class="price">{{c.price}}</td>
　　　　　　　　<td class="count">

　　　　　　　　　　<span ng-click="click_sub($index)" class="reduce">-</span><input class="count-input" type="text" ng-model="c.num"/>

　　　　　　　　　　<span ng-click="clickAdd($index)" class="add">+</span>

　　　　　　　　</td>
　　　　　　　　<td class="subtotal">{{c.total}}</td>
　　　　　　　　<td class="operation"><span class="delete" ng-click="deleteAlone($index)">删除</span></td>
　　　　　　</tr>
　　　　</tbody>
　　</table>

　　<div class="foot" id="foot">
　　　　<label class="fl select-all"><input type="checkbox" class="check-all check" ng-click="checkAll()" ng-model="all"/>&nbsp;全选</label>
　　　　<a class="fl delete" href="javascript:;" ng-click="deleteAll()">删除</a>
　　　　<div class="fr closing">结 算</div>
　　　　<div class="fr total">合计：￥<span>{{sumTotal}}</span></div>
　　　　<div class="fr selected" id="selected">已选商品<span id="selectedTotal">{{count}}</span>件

　　　　　　<span class="arrow up">︽</span><span class="arrow down">︾</span>

　　　　</div>
　　　　<div class="selected-view">

　　　　　　<div id="selectedViewList" class="clearfix"><div><img src="images/1.jpg"><span>取消选择</span></div></div>

　　　　　　<span class="arrow">aaaa<span>aaaa</span></span>
　　　　</div>
　　</div>
</div>

js代码如下：

var app = angular.module('myApp', []);

app.controller('myCart', function($scope) {
　　$scope.cartList=[{
　　　　id:0,
　　　　image:"images/1.jpg",
　　　　name:"Casio/卡西欧 EX-TR350",
　　　　price:5999.88,
　　　　num:1,
　　　　total:5999.88,
　　　　check:false
　　},
　　{
　　　　id:1,
　　　　image:"images/2.jpg",
　　　　name:"Canon/佳能 PowerShot SX50 HS",
　　　　price:3888.50,
　　　　num:1,
　　　　total:3888.50,
　　　　check:false
　　},
　　{
　　　　id:2,
　　　　image:"images/3.jpg",
　　　　name:"Sony/索尼 DSC-WX300",
　　　　price:1428.50,
　　　　num:1,
　　　　total:1428.50,
　　　　check:false
　　},
　　{
　　　　id:3,
　　　　image:"images/4.jpg",
　　　　name:"Fujifilm/富士 instax mini 25",
　　　　price:640.60,
　　　　num:1,
　　　　total:640.60,
　　　　check:false
　　}

]

// 所有的都选中
　　$scope.checkAll=function(){
　　　　for(var i in $scope.cartList){
　　　　$scope.cartList[i].check=$scope.all;
　　　}
　　}

//删除单行数据
　　$scope.deleteAlone=function(index){
　　　　$scope.cartList.splice(index,1);
　　}

//点击商品数量增加
　　$scope.clickAdd=function(index){
　　　　$scope.cartList[index].num++;
　　}

//点击商品数量减少
　　$scope.click_sub=function(index){
　　　　$scope.cartList[index].num--;
　　　　if($scope.cartList[index].num<=0){
　　　　$scope.cartList[index].num=0;
　　}
　}

这里用$watch函数监视cartList数组中对象的属性.这里普及一下$watch监听函数

$watch是一个$scope函数，用于监听模型变化，当你的模型发生变化时，它会通知你

$watch(watchExpression,listener,objectEquality)

参数说明如下：

watchExpression：监听的对象，可以是angular表达式 “name”,或者一个函数 function(){return $scope.name;}

listener：当监听的对象发生改变时调用的函数  它有三个参数 (newValue,oldValue,scope)

objectEquality：是否深度监听；设置为true时，表示告诉angular检查所监控的对象中的每个属性的变化，如果你希望监控数组个别元素或者对象的属性，那你应该使用它

　　$scope.$watch('cartList',function(newValue,oldValue,scope){
　　　　$scope.sumTotal=0; //总计
　　　　$scope.count=0; //计数器
　　　　for(var i in newValue){
　　　　　　var total=newValue[i].num*newValue[i].price; //计算出新的结果
　　　　　　$scope.cartList[i].total=total.toFixed(3); //保留三位小数并且把它赋值给元数据;
　　　　　　if(newValue[i].check){
　　　　　　$scope.sumTotal=(parseFloat($scope.sumTotal)+parseFloat(total)).toFixed(2); //合计保留2位数
　　　　　　$scope.count++;
　　　　}
　　}
　　　　$scope.all=($scope.count==newValue.length); //如果所有的都选中的话，那么全选也应该选中
　　},true);
});

 

效果如下：

 

对应的css代码如下：

@charset "utf-8";
*{margin:0;padding:0;list-style-type:none;}
a{color:#666;text-decoration:none;}
table{border-collapse:collapse;border-spacing:0;border:0;}
body{color:#666;font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}
clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
.clearfix{display:inline-table}
*html .clearfix{height:1%}
.clearfix{display:block}
*+html .clearfix{min-height:1%}
.fl{float:left;}
.fr{float:right;}

.catbox{width:940px;margin:0 auto;}
.catbox table{text-align:center;width:100%;}
.catbox table th,.catbox table td{border:1px solid #CADEFF;}
.catbox table th{background:#e2f2ff;border-top:3px solid #a7cbff;height:30px;}
.catbox table td{padding:10px;color:#444;}
.catbox table tbody tr:hover{background:RGB(238,246,255);}
.checkbox{width:60px;}
.goods{width:300px;}
.goods span{width:180px;margin-top:20px;text-align:left;float:left;}
.goods img{width:100px;height:80px;margin-right:10px;float:left;}
.price{width:130px;}
.count{width:90px;}
.count .add, .count input, .count .reduce{float:left;margin-right:-1px;position:relative;z-index:0;}
.count .add, .count .reduce{height:23px;width:17px;border:1px solid #e5e5e5;background:#f0f0f0;text-align:center;line-height:23px;color:#444;}
.count .add:hover, .count .reduce:hover{color:#f50;z-index:3;border-color:#f60;cursor:pointer;}
.count input{width:50px;height:15px;line-height:15px;border:1px solid #aaa;color:#343434;text-align:center;padding:4px 0;background-color:#fff;z-index:2;}
.subtotal{width:150px;color:red;font-weight:bold;}
.operation span:hover,a:hover{cursor:pointer;color:red;text-decoration:underline;}

.foot{margin-top:10px;color:#666;height:48px;border:1px solid #c8c8c8;background-color:#eaeaea;background-image:linear-gradient(RGB(241,241,241),RGB(226,226,226));position:relative;z-index:8;}
.foot div, .foot a{line-height:48px;height:48px;}
.foot .select-all{width:100px;height:48px;line-height:48px;padding-left:5px;color:#666;}
.foot .closing{border-left:1px solid #c8c8c8;width:100px;text-align:center;color:#000;font-weight:bold;background:RGB(238,238,238);cursor:pointer;}
.foot .total{margin:0 20px;cursor:pointer;}
.foot #priceTotal, .foot #selectedTotal{color:red;font-family:"Microsoft Yahei";font-weight:bold;}
.foot .selected{cursor:pointer;}
.foot .selected .arrow{position:relative;top:-3px;margin-left:3px;}
.foot .selected .down{position:relative;top:3px;display:none;}
.show .selected .down{display:inline;}
.show .selected .up{display:none;}
.foot .selected:hover .arrow{color:red;}
.foot .selected-view{width:935px;border:1px solid #c8c8c8;position:absolute;height:auto;background:#ffffff;z-index:9;bottom:48px;left:-1px;display:none;}
.show .selected-view{display:block;}
.foot .selected-view div{height:auto;}
.foot .selected-view .arrow{font-size:16px;line-height:100%;color:#c8c8c8;position:absolute;right:330px;bottom:-9px;}
.foot .selected-view .arrow span{color:#ffffff;position:absolute;left:0px;bottom:1px;}

#selectedViewList{padding:10px 20px 10px 20px;}
#selectedViewList div{display:inline-block;position:relative;width:100px;height:80px;border:1px solid #ccc;margin:10px;float:left;}
#selectedViewList div img{width:100px;height:80px;margin-right:10px;float:left;}
#selectedViewList div span{display:none;color:#ffffff;font-size:12px;position:absolute;top:0px;right:0px;width:60px;height:18px;line-height:18px;text-align:center;background:#000;cursor:pointer;}
#selectedViewList div:hover span{display:block;}