Angularjs 制作购物车功能实例代码


Posted in Javascript onSeptember 14, 2016

初学angularJS   闲暇之余做了个小案例。

功能:计算购物车商品的价格,以及删除购物车商品。

以下是完整案例(jQuery和angularjs需要自己引入)

<!doctype html>
<html ng-app="myApp">
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
.cursors{cursor:pointer}
</style>
<script src="js/jquery-1.11.1.js"></script>
<script src="js/angular.min.js"></script>


<script>




var A=angular.module('myApp',[]);
//购物车 加
A.directive('myAdds',function(){
return {
link:function(scope, element, attr){
element.click(function(){
var This=this
angular.forEach(scope.dataList,function(data,index,array){
if(attr.items==data.items){
data.num=parseInt(data.num)+1;
scope.allPrices();
scope.$apply() //刷新视图
}

});
});
} 
}
})
//购物车 减
A.directive('myMinus',function(){
return {
link:function(scope, element, attr){
element.click(function(){
var This=this
angular.forEach(scope.dataList,function(data,index,array){

if(attr.items==data.items){

if(data.num<=1){

if(confirm('是否删除该产品')){
data.num=0;
$(This).siblings('input').val(0);
scope.allPrices();
scope.$apply();
//delete array[index];
scope.dataList.splice(index,1)
$(This).parents('tr').remove();
}

}else{
data.num=parseInt(data.num)-1;
};

scope.allPrices();
scope.$apply();
}
});
});
} 
}
})
//全选,全不选
A.directive('allOrcan',function(){
return function(scope, element, attr){
element.click(function(){
var isCheck=$(this).find('input').prop('checked');
if(isCheck){
$('input[type=checkbox]').prop('checked',true);
}else{
$('input[type=checkbox]').not($('input[type=checkbox]').eq(0)).prop('checked',false);
}
angular.forEach(scope.dataList,function(data,index,array){
data.Bol=isCheck;
})
scope.allPrices();
scope.$apply();
})
}
})
//单选
A.directive('oneCheck',function(){
return function(scope, element, attr){
element.click(function(){
var This=this
angular.forEach(scope.dataList,function(data,index,array){
if(attr.items==data.items){
var isCheck=$(This).prop('checked');
data.Bol=isCheck;
scope.allPrices();
scope.$apply();
}
})
});
}
})






A.controller('myAngular',['$scope','$filter',function($scope,$filter){
$scope.dataList=[//初始化购物车的数据
{Bol:'false',name:'洗衣机',num:'1',items:'0',oneprice:'900',price:''},
{Bol:'false',name:'热水器',num:'1',items:'1',oneprice:'110',price:''},
{Bol:'false',name:'空调',num:'1',items:'2',oneprice:'116',price:''},
{Bol:'false',name:'冰箱',num:'1',items:'3',oneprice:'2087',price:''},
{Bol:'false',name:'电磁炉',num:'1',items:'4',oneprice:'135',price:''},
{Bol:'false',name:'被子',num:'1',items:'5',oneprice:'50',price:''},
{Bol:'false',name:'本子',num:'1',items:'6',oneprice:'2',price:''},
{Bol:'false',name:'笔',num:'1',items:'7',oneprice:'115',price:''},
{Bol:'false',name:'杯子',num:'1',items:'8',oneprice:'12',price:''},
{Bol:'false',name:'书',num:'1',items:'9',oneprice:'5',price:''},
{Bol:'false',name:'零食',num:'1',items:'10',oneprice:'13',price:''}
];
//总价格的计算
$scope.allPrices=function(){
$scope.allprice=0;
angular.forEach($scope.dataList,function(data,index,array){
data.price=data.num*data.oneprice;
if(data.Bol==true){
$scope.allprice+=parseInt(data.price);
}
})


return $scope.allprice;
};

//按单价排序
$scope.CartSort=function(arg){
angular.forEach($scope.dataList,function(data,index,array){
arguments.callee['CartSort('+arg+')']=!arguments.callee['CartSort('+arg+')']
$scope.dataList=$filter('orderBy')($scope.dataList,arg,arguments.callee['CartSort('+arg+')'])
})

}




}])
</script>
</head>


<body ng-controller="myAngular">
<table border="1">
   <tr>
     <td><label all-orcan><input type="checkbox">全选/取消全选 </label></td>
     <td>名称</td>
     <td>数量</td>
     <td ng-click='CartSort("oneprice")'>单价</td>
     <td>价格</td>
    </tr>
   <tr ng-repeat="data in dataList">
     <td><input type="checkbox" one-check items={{data.items}}></td>
     <td ng-cloak>{{data.name}}</td>
     <td><input type="text" ng-cloak ng-model="data.num" items="{{data.items}}" style="width:50px;text-align:center;"> <button my-adds items="{{data.items}}" ng-class="{cursors:true}" >+</button> <button my-minus items="{{data.items}}" ng-class="{cursors:true}" >-</button> </td>
     <td ng-cloak>{{data.oneprice}}</td>
     <td ng-cloak>{{data.price}}</td>
    </tr>
   
  </table>
  <div>总价格:{{allPrices()}}</div>
</body>
</html>
<!--<script>alert(0)</script>-->

效果如图所示: 

Angularjs 制作购物车功能实例代码

尊重劳动成果,转载请注明出处(http://blog.csdn.net/sllailcp/article/details/47833315)...

Javascript 相关文章推荐
jQuery中验证表单提交方式及序列化表单内容的实现
Jan 06 Javascript
jQuery使用andSelf()来包含之前的选择集
May 19 Javascript
javascript的tab切换原理与效果实现方法
Jan 10 Javascript
javascript封装 Cookie 应用接口
Aug 07 Javascript
Chrome浏览器的alert弹窗禁止再次弹出后恢复的方法
Dec 30 Javascript
详解js前端代码异常监控
Jan 11 Javascript
分享十三个最佳JavaScript数据网格库
Apr 07 Javascript
javaScript实现复选框全选反选事件详解
Nov 20 Javascript
微信小程序实现流程进度的图样式功能
Jan 16 Javascript
关于js对textarea换行符的处理方法浅析
Aug 03 Javascript
浅谈Vue的响应式原理
May 30 Javascript
javascript canvas时钟模拟器
Jul 13 Javascript
一步一步封装自己的HtmlHelper组件BootstrapHelper(三)
Sep 14 #Javascript
Angular ng-repeat 对象和数组遍历实例
Sep 14 #Javascript
一步一步封装自己的HtmlHelper组件BootstrapHelper(二)
Sep 14 #Javascript
利用bootstrapValidator验证UEditor
Sep 14 #Javascript
JavaScript鼠标特效大全
Sep 13 #Javascript
javascript表单控件实例讲解
Sep 13 #Javascript
js从数组中删除指定值(不是指定位置)的元素实现代码
Sep 13 #Javascript
You might like
一个改进的UBB类
2006/10/09 PHP
来自PHP.NET的入门教程
2006/10/09 PHP
用PHP ob_start()控制浏览器cache、生成html实现代码
2010/02/16 PHP
分享一个Laravel好用的Cache宏
2015/03/02 PHP
php实现的mongodb操作类
2015/05/28 PHP
PHP基于简单递归函数求一个数阶乘的方法示例
2017/04/26 PHP
客户端静态页面玩分页
2006/06/26 Javascript
JavaScript中this关键字使用方法详解
2007/03/08 Javascript
JavaScript 学习技巧
2010/02/17 Javascript
基于JavaScript实现继承机制之调用call()与apply()的方法详解
2013/05/07 Javascript
EasyUI实现二级页面的内容勾选的方法
2015/03/01 Javascript
JS更改select内option属性的方法
2015/10/14 Javascript
JS区分浏览器页面是刷新还是关闭
2016/04/17 Javascript
浅析script标签中的defer与async属性
2016/11/30 Javascript
详解JavaScript时间处理之几个月前或几个月后的指定日期
2016/12/21 Javascript
对于js垃圾回收机制的理解
2017/09/14 Javascript
微信小程序仿微信运动步数排行(交互)
2018/07/13 Javascript
解决layui数据表格排序图标被超出的表头挤出去的问题
2019/09/19 Javascript
解决layui动态添加的元素click等事件触发不了的问题
2019/09/20 Javascript
python使用fork实现守护进程的方法
2017/11/16 Python
python在TXT文件中按照某一字符串取出该字符串所在的行方法
2018/12/10 Python
详解Python Qt的窗体开发的基本操作
2019/07/14 Python
时尚的CSS3进度条效果
2012/02/22 HTML / CSS
英国殿堂级有机护肤品牌:Rodial
2017/04/17 全球购物
受希腊女神灵感的晚礼服、鸡尾酒礼服和婚纱:THEIA
2018/04/15 全球购物
Derek Rose官网:英国高档睡衣、家居服和内衣品牌
2020/01/18 全球购物
PyQt QMainWindow的使用示例
2021/03/24 Python
12月红领巾广播稿
2014/02/13 职场文书
中专生毕业个人鉴定
2014/02/26 职场文书
企业安全标语
2014/06/07 职场文书
法定代表人授权委托书范文
2014/08/02 职场文书
内科护士节演讲稿
2014/09/11 职场文书
活动宣传稿范文
2015/07/23 职场文书
管理者日常工作必备:22条企业管理流程模板!
2019/07/12 职场文书
MySQL性能压力基准测试工具sysbench的使用简介
2021/04/21 MySQL
一次SQL查询优化原理分析(900W+数据从17s到300ms)
2022/06/10 SQL Server