Angularjs 制作购物车功能实例代码
初学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>-->
效果如图所示：
尊重劳动成果，转载请注明出处（http://blog.csdn.net/sllailcp/article/details/47833315）...
相关推荐
-
利用Angularjs和bootstrap实现购物车功能
先来看看效果图: 购物车 一.代码 如果看了这个效果有兴趣想知道怎么做出来的话,那就继续往下看吧.话不多少,直接上代码. html代码: <!DOCTYPE html> <html lang="en" ng-app="cart"> <head> <meta charset="UTF-8"> <title>购物车</title> <link rel="style
-
angularjs实现简单的购物车功能
本文实例为大家分享了angularjs实现购物车功能的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; padding: 0; margin-left: 10px; } li{ list-
-
AngularJS 购物车全选/取消全选功能的实现方法
刚学习angularJS,于是练习写了一个类似于购物车的全选/取消全选的功能,主要实现的功能有: 1.勾选全选checkbox,列表数据全部被勾选,取消同理,用ng-model实现双向绑定: 2.选中列表中的所有checkbox,全选也会被勾选:(这里我想到的方法是给每一个对象增加checked字段,然后勾选触发echoChange()函数,用了一个cc变量计算当前checked为true的个数,然后再判断被勾选个数与数组长度是否相等,相等则证明全部被勾选,于是全选按钮也赋值为true;不知道还
-
Angularjs 制作购物车功能实例代码
初学angularJS 闲暇之余做了个小案例. 功能:计算购物车商品的价格,以及删除购物车商品. 以下是完整案例(jQuery和angularjs需要自己引入) <!doctype html> <html ng-app="myApp"> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> .cursors{curs
-
Web制作验证码功能实例代码
web开发中,经常会使用验证码功能,例如登录.注册,或其他关键功能之前经常会使用.合理使用 验证功能可以防止ddos攻击.爬虫攻击等. 实现效果: 实现原理: 由后台提供生成验证码的接口,前端每次请求会后端会生成验证码图片和验证码,验证码图片发送到客户端供客户端显示, 验证码字符串保存再后端的Session中,待前端再次请求业务接口与session里的验证码字符串做比对. 实现思路: 1.先由后端提供可以生产验证码图片的接口 2.前端通过 img 中设置 src 属性,请求验证码生
-
Avalonjs 实现简单购物车功能(实例代码)
先给大家简单介绍下avalon概念 avalon是国内最强大的MVVM框架,没有之一,虽然淘宝KISSY团队也搞了两个MVVM框架,但都无疾而终.其他的MVVM框架都没几个.也只有外国人与像我这样闲的架构师才有时间钻研这东西.我很早之前就预言,MVVM是前端的终极解决方案.我之前在盛大无线做盛大通行证就深有体会,一个业务逻辑对应十来个不同的界面,分层架构是必不可少的.因此双向绑定作为解药,结合很早就流行的MVC框架,衍生出MVVM这神器. 因为最近有在做购物车,然后我们是用avalon来实现一
-
AngularJs表单校验功能实例代码
废话不多说了,具体代码如下所示: <!DOCTYPE html> <html ng-app="angularFormCheckModule"> <head> <meta charset="UTF-8"> <title>angular表单校验</title> <link rel="stylesheet" href="../css/bootstrap.min.cs
-
AngularJS 实现点击按钮获取验证码功能实例代码
html :样式采用了sui框架的样式,请自行引入查看,AngularJS,自己引入, <div ng-controller="forGetPassword" ng-app="routingDemoApp"> <form novalidate name="forget"> <header class="bar bar-nav"> <a href="javascript:his
-
AngularJs表单验证实例代码解析
常用的表单验证指令如下详情: 1. 必填项验证 某个表单输入是否已填写,只要在输入字段元素上添加HTML5标记required即可: <input type="text" required /> 2. 最小长度 验证表单输入的文本长度是否大于某个最小值,在输入字段上使用指令ng-minleng= "{number}": <input type="text" ng-minlength="5" /> 3.
-
JS实现百度搜索接口及链接功能实例代码
本文通过代码给大家介绍js实现百度搜索接口及链接功能,具体代码如下所示: 在上篇文章给大家介绍了JS 实现百度搜索功能 <!DOCTYPE html> <html ng-app="myApp"> <head> <meta charset="UTF-8"> <title>anchor</title> <style> *{ margin:0; padding:0; } #wei{ wid
-
Angularjs按需查询实例代码
课程信息管理界面有这样一个需求,当课程类型为公选课的时候,可以选择课程性质,当为其他课程类型的时候,不必选择课程性质. 代码: /** * 获取课程类型下拉框数据 */ getCourseTypeNameOptions(){ let url = "teachingManagement-web/course/queryAllCourseType"; this.http.get(url).subscribe( res =>{ this.courseTypeNameOptions =
-
jQuery实现全部购物车功能实例
目录 一.全选 二.增减商品数量 三.修改商品小计 四.计算总计和总和 五.删除商品 六.选中商品添加背景 七.html 全部核心代码 今天是一些购物车的基本功能实现,全选.增减商品数量.修改商品小计.计算总计和总和.删除商品.选中添加背景颜色等一些常见功能. html结构的全部代码都在文末了,懂的都懂啊!!! 一.全选 全选分析: 全选思路:里面3个小的复选框按钮(j-checkbox)选中状态(checked)跟着全选按钮(checkall)走. 因为checked 是复选框的固有属性,
-
AngularJS模糊查询功能实现代码(过滤内容下拉菜单排序过滤敏感字符验证判断后添加表格信息)
注:添加球员的功能无指定技术要求,添加球员的页面也无具体样式要求. 1.实现上图页面所有元素,页面布局规整,跟上图效果一致 2.实现文案显示,按效果显示 3.实现查询,实现查询敏感词过滤,实现查询后列表变化 4.实现倒序,实现正序,下拉列表排序效果都实现 5.按钮背景一致,按钮样式 6.实现添加球员页面,添加球员页面样式,添加球员功能,添加球员必填项判断,添加完球员后能显示在表格内,已存在球员判重. 7.表格样式跟上图样式一致 代码: <!DOCTYPE html> <html lang