Angularjs 制作購物車功能實例代碼
初學(xué)angularJS 閑暇之余做了個小案例。
功能:計算購物車商品的價格,以及刪除購物車商品。
以下是完整案例(jQuery和angularjs需要自己引入)
<!doctype html> <html ng-app="myApp"> <head> <meta charset="utf-8"> <title>無標(biāo)題文檔</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('是否刪除該產(chǎn)品')){ 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=[//初始化購物車的數(shù)據(jù) {Bol:'false',name:'洗衣機',num:'1',items:'0',oneprice:'900',price:''}, {Bol:'false',name:'熱水器',num:'1',items:'1',oneprice:'110',price:''}, {Bol:'false',name:'空調(diào)',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>數(shù)量</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>-->
效果如圖所示:
尊重勞動成果,轉(zhuǎn)載請注明出處(http://blog.csdn.net/sllailcp/article/details/47833315)...
相關(guān)文章
Angular.js如何從PHP讀取后臺數(shù)據(jù)
這篇文章主要為大家簡單介紹了Angular.js如何從PHP讀取后臺數(shù)據(jù),本文將Angular和PHP相結(jié)合,從后臺讀取數(shù)據(jù),感興趣的小伙伴們可以參考一下2016-03-03AngularJS入門教程之?dāng)?shù)據(jù)綁定原理詳解
這篇文章主要介紹了AngularJS數(shù)據(jù)綁定原理,較為詳細的分析了AngularJS數(shù)據(jù)綁定的原理、使用技巧與相關(guān)注意事項,需要的朋友可以參考下2016-11-11解決angularjs WdatePicker ng-model的問題
今天小編就為大家分享一篇解決angularjs WdatePicker ng-model的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09使用Angular9和TypeScript開發(fā)RPG游戲的方法
這篇文章主要介紹了使用Angular9和TypeScript開發(fā)RPG游戲的方法,本文通過實例代碼給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-03-03對angular 監(jiān)控數(shù)據(jù)模型變化的事件方法$watch詳解
今天小編就為大家分享一篇對angular 監(jiān)控數(shù)據(jù)模型變化的事件方法$watch詳解,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-10-10詳解angular2采用自定義指令(Directive)方式加載jquery插件
本篇文章主要介紹了詳解angular2采用自定義指令(Directive)方式加載jquery插件 ,具有一定的參考價值,感興趣的小伙伴們可以參考一下。2017-02-02