Angularjs 制作购物车功能实例代码  更新时间:2016年09月14日 09:31:47   作者:love深蓝   这篇文章主要介绍了Angularjs 制作购物车功能实例代码的相关资料,并附示例代码,需要的朋友可以参考下 初学angularJS   闲暇之余做了个小案例。 功能:计算购物车商品的价格,以及删除购物车商品。 以下是完整案例(jQuery和angularjs需要自己引入) 无标题文档 全选/取消全选 名称 数量 单价 价格 {{data.name}} + -  {{data.oneprice}} {{data.price}} 总价格:{{allPrices()}} <!—-> 效果如图所示:  尊重劳动成果,转载请注明出处(http://blog.csdn.net/sllailcp/article/details/47833315)… 您可能感兴趣的文章: 利用Angularjs和bootstrap实现购物车功能 使用Angular.js实现简单的购物车功能 Angular实现购物车计算示例代码 angular和BootStrap3实现购物车功能 AngularJS 购物车全选/取消全选功能的实现方法 angular.js实现购物车功能 angularjs实现简单的购物车功能 AngularJS 实现购物车全选反选功能 AngularJs 终极购物车(实例讲解) Angular动画实现的2种方式以及添加购物车动画实例代码 AngularJS 购物车功能 相关文章 AngularJS实现的鼠标拖动画矩形框示例【可兼容IE8】 这篇文章主要介绍了AngularJS实现的鼠标拖动画矩形框,涉及基于AngularJS的事件响应及页面元素属性动态操作相关实现技巧,需要的朋友可以参考下 2019-05-05 Angular5中调用第三方js插件的方法 下面小编就为大家分享一篇Angular5中调用第三方js插件的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧 2018-02-02 Angularjs渲染的 using 指令的星级评分系统示例 本篇文章主要介绍了Angularjs渲染的 using 指令的星级评分系统示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2017-11-11 详解如何在angular2中获取节点 本篇文章主要介绍了如何在angular2中获取节点,详细的介绍了几种方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 2017-11-11 AngularJS中$apply方法和$watch方法用法总结 这篇文章主要介绍了AngularJS中$apply方法和$watch方法用法,结合实例形式总结分析了$apply方法和$watch方法的功能、参数含义、使用技巧与相关注意事项,需要的朋友可以参考下 2016-12-12 Angularjs自定义指令实现三级联动 选择地理位置 这篇文章主要介绍了Angularjs自定义指令实现三级联动,选择地理位置,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 2017-02-02 Angular懒加载机制刷新后无法回退的快速解决方法 使用oclazyload懒加载angular的模块,刷新页面后,单击回退按钮无法返回上一个页面.怎么回事呢?下面小编给大家带来了angular懒加载机制刷新后无法回退的快速解决方法,非常不错,感兴趣的朋友参考下 2016-08-08 Angular实现模版驱动表单的自定义校验功能(密码确认为例) 这篇文章主要介绍了Angular实现模版驱动表单的自定义校验功能(密码确认为例),本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下 2018-05-05 AngularJS1.X学习笔记2-数据绑定详解 本篇文章主要介绍了AngularJS1.X学习笔记2-数据绑定详解,具有一定的参考价值,有兴趣的可以了解一下。 2017-04-04 AngularJS 单元测试(二)详解 这篇文章主要介绍了AngularJS 单元测试(二)的相关资料,需要的朋友可以参考下 2016-09-09 最新评论

初学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实现购物车功能
  • 使用Angular.js实现简单的购物车功能
  • Angular实现购物车计算示例代码
  • angular和BootStrap3实现购物车功能
  • AngularJS 购物车全选/取消全选功能的实现方法
  • angular.js实现购物车功能
  • angularjs实现简单的购物车功能
  • AngularJS 实现购物车全选反选功能
  • AngularJs 终极购物车(实例讲解)
  • Angular动画实现的2种方式以及添加购物车动画实例代码
张贴在3