欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2024-01-13 10:26:10
初学angularjs   闲暇之余做了个小案例。 功能:计算购物车商品的价格,以及删除购物车商品。 以下是完整案例(jquery和angularj...

初学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)...