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 相关文章推荐
javascript管中窥豹 形参与实参浅析
Dec 17 Javascript
javascript for循环从入门到偏门(效率优化+奇特用法)
Aug 01 Javascript
jQuery实现动画效果的实例代码
May 07 Javascript
JQuery中extend使用介绍
Mar 13 Javascript
jQuery插件实现多级联动菜单效果
Dec 01 Javascript
jquery实现鼠标悬浮停止轮播特效
Aug 20 Javascript
一道JS前端闭包面试题解析
Dec 25 Javascript
微信小程序 在线支付功能的实现
Mar 14 Javascript
mui back 返回刷新页面的实例
Dec 06 Javascript
node.js自动上传ftp的脚本分享
Jun 16 Javascript
Vue 根据条件判断van-tab的显示方式
Aug 03 Javascript
npm全局环境变量配置详解
Dec 15 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代码
2012/07/17 PHP
php随机输出名人名言的代码
2012/10/07 PHP
dhtmlxTree目录树增加右键菜单以及拖拽排序的实现方法
2013/04/26 PHP
php静态文件返回304技巧分享
2015/01/06 PHP
PHP内存溢出优化代码详解
2021/02/26 PHP
js实现横向百叶窗效果网页切换动画效果的方法
2015/03/02 Javascript
jQuery左侧大图右侧小图焦点图幻灯切换代码分享
2015/08/19 Javascript
javascript中的altKey 和 Event属性大全
2015/11/06 Javascript
深入理解MVC中的时间js格式化
2016/05/19 Javascript
30分钟快速掌握Bootstrap框架
2016/05/24 Javascript
JS把内容动态插入到DIV的实现方法
2016/07/19 Javascript
jQuery复制节点用法示例(clone方法)
2016/09/08 Javascript
微信小程序实现带刻度尺滑块功能
2017/03/29 Javascript
AngularJS使用ng-repeat遍历二维数组元素的方法详解
2017/11/11 Javascript
从零到一详聊创建Vue工程及遇到的常见问题
2019/04/25 Javascript
jquery实现购物车基本功能
2019/10/25 jQuery
JavaScript如何使用插值实现图像渐变
2020/06/28 Javascript
Python 过滤字符串的技巧,map与itertools.imap
2008/09/06 Python
python解析xml模块封装代码
2014/02/07 Python
Python实现在线程里运行scrapy的方法
2015/04/07 Python
六个窍门助你提高Python运行效率
2015/06/09 Python
Python使用PyCrypto实现AES加密功能示例
2017/05/22 Python
Python编程pygame模块实现移动的小车示例代码
2018/01/03 Python
Python找出最小的K个数实例代码
2018/01/04 Python
Python实现的字典排序操作示例【按键名key与键值value排序】
2018/12/21 Python
python 输出所有大小写字母的方法
2019/01/02 Python
详解python中的异常和文件读写
2021/01/03 Python
使用CSS3制作一个简单的进度条(demo)
2017/05/23 HTML / CSS
SQL面试题
2013/04/30 面试题
项目经理岗位职责
2013/11/11 职场文书
高中毕业生的个人自我评价
2014/02/21 职场文书
写好自荐信需做到的5要点
2014/03/07 职场文书
给公司的建议书范文
2014/05/13 职场文书
服务承诺书格式
2014/05/21 职场文书
2014年图书管理员工作总结
2014/12/01 职场文书
详解Android中的TimePickerView(时间选择器)的用法
2022/04/30 Java/Android