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解析JSON数据示例代码
Mar 17 Javascript
实例讲解JS中数组Array的操作方法
May 09 Javascript
javascript实现checkBox的全选,反选与赋值
Mar 12 Javascript
JavaScript 动态加载脚本和样式的方法
Apr 13 Javascript
JavaScript实现给定时间相加天数的方法
Jan 25 Javascript
VC调用javascript的几种方法(推荐)
Aug 09 Javascript
实例分析浏览器中“JavaScript解析器”的工作原理
Dec 12 Javascript
javascript设计模式之模块模式学习笔记
Feb 15 Javascript
javascript实现秒表计时器的制作方法
Feb 16 Javascript
详解微信小程序Radio选中样式切换
Jul 06 Javascript
node.js的Express服务器基本使用教程
Jan 09 Javascript
JavaScript实现网页计算器功能
Oct 29 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
PHP脚本的10个技巧(8)
2006/10/09 PHP
多php服务器实现多session并发运行
2006/10/09 PHP
PHP中使用foreach和引用导致程序BUG的问题介绍
2012/09/05 PHP
PHP实现生成模糊图片的方法示例
2017/12/21 PHP
如何解决PHP获取不到SESSION信息之一般情况
2019/10/10 PHP
prototype class详解
2006/09/07 Javascript
JavaScript快速检测浏览器对CSS3特性的支持情况
2012/09/26 Javascript
NodeJS的url截取模块url-extract的使用实例
2013/11/18 NodeJs
javascript中CheckBox全选终极方案
2015/05/20 Javascript
详细分析JavaScript函数定义
2015/07/16 Javascript
JS实现网页游戏中滑块响应鼠标点击移动效果
2015/10/19 Javascript
AngularJS中的拦截器实例详解
2017/04/07 Javascript
H5实现仿flash效果的实现代码
2017/09/29 Javascript
JavaScript实现树的遍历算法示例【广度优先与深度优先】
2017/10/26 Javascript
JS Input里添加小图标的两种方法
2017/11/11 Javascript
Angular中innerHTML标签的样式不起作用的原因解析
2019/06/18 Javascript
如何HttpServletRequest文件对象并储存
2020/08/14 Javascript
Python正则表达式匹配ip地址实例
2014/10/09 Python
用Python解析XML的几种常见方法的介绍
2015/04/09 Python
Python写入数据到MP3文件中的方法
2015/07/10 Python
Python中getattr函数和hasattr函数作用详解
2016/06/14 Python
浅谈Python中用datetime包进行对时间的一些操作
2016/06/23 Python
Python实现简易端口扫描器代码实例
2017/03/15 Python
python利用高阶函数实现剪枝函数
2018/03/20 Python
python 多维切片之冒号和三个点的用法介绍
2018/04/19 Python
使用Python监视指定目录下文件变更的方法
2018/10/15 Python
python thrift 实现 单端口多服务的过程
2020/06/08 Python
幼儿园园长自我鉴定
2013/10/22 职场文书
同事吵架检讨书
2014/02/05 职场文书
企业演讲比赛主持词
2014/03/18 职场文书
十周年庆典策划方案
2014/06/03 职场文书
本科应届生求职信
2014/08/05 职场文书
2015年幼儿园后勤工作总结
2015/04/25 职场文书
忠犬八公的故事观后感
2015/06/05 职场文书
工作年限证明范本
2015/06/15 职场文书
python文件与路径操作神器 pathlib
2022/04/01 Python