angularjs购物车练习

  本文是一个简单的购物车练习，功能包括增加、减少某商品的数量，从而影响该商品的购买总价以及所有商品的购买总价；从购物车内移除一项商品；清空购物车。

页面效果如图：


    若使用js或jQuery来实现这个页面，会需要绑定很多事件，如减少数量按钮事件，增加数量按钮事件，移除某项商品事件，清空购物车事件，而这些事件之中很多代码很重复，比如计算某项商品的总购买价，计算所有商品的购买总价，不胜其烦，现在有了AngularJS，则简单许多，因为数据模型双向绑定等原因。

上图页面的代码：

html

 

[html] view plain copy
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>angular购物车练习</title>  
  6.     <link rel="stylesheet" href="../../vendor/bootstrap3/css/bootstrap.css">  
  7.     <script src="../../vendor/angular/angular.min.js"></script>  
  8.     <script src="app/index2.js"></script>  
  9. </head>  
  10. <body ng-app="myApp" ng-controller="myCtrl">  
  11. <div class="container">  
  12.     <table class="table" ng-show="cartList.length > 0">  
  13.         <thead>  
  14.         <tr>  
  15.             <th>产品编号</th>  
  16.             <th>产品名称</th>  
  17.             <th>购买数量</th>  
  18.             <th>产品单价</th>  
  19.             <th>产品总价</th>  
  20.             <th>操作</th>  
  21.         </tr>  
  22.         </thead>  
  23.         <tbody>  
  24.         <tr ng-repeat="item in cartList">  
  25.             <td>{{item.id}}</td>  
  26.             <td>{{item.name}}</td>  
  27.             <td>  
  28.                 <button ng-click="reduceOne(item.id)" class="btn btn-primary">-</button>  
  29.                 <input type="text" ng-model="item.quantity">  
  30.                 <button ng-click="addOne(item.id)" class="btn btn-primary">+</button>  
  31.             </td>  
  32.             <td>{{item.price}}</td>  
  33.             <td>{{item.quantity * item.price}}</td>  
  34.             <td><button ng-click="remove(item.id)" class="btn btn-danger">移除</button></td>  
  35.         </tr>  
  36.         <tr>  
  37.             <td>总购买价</td>  
  38.             <td>{{totalCost()}}</td>  
  39.             <td>总购买数量</td>  
  40.             <td>{{totalCount()}}</td>  
  41.             <td colspan="3"><button ng-click="cartList=[]" class="btn btn-danger">清空购物车</button></td>  
  42.         </tr>  
  43.         </tbody>  
  44.     </table>  
  45.     <h4 ng-show="cartList.length < 1">您的购物车暂无商品</h4>  
  46. </div>  
  47.   
  48. </body>  
  49. </html>  

index2.js :

 

[javascript] view plain copy
  1. var app=angular.module("myApp",[]);  
  2. app.controller("myCtrl",function($scope){  
  3.     $scope.cartList=[  
  4.         {id:1000,name:"iphone5s",quantity:3,price:4300},  
  5.         {id:1001,name:"iphone5",quantity:30,price:3300},  
  6.         {id:1002,name:"imac",quantity:3,price:3000},  
  7.         {id:1003,name:"ipad",quantity:5,price:6900}  
  8.     ];  
  9.   
  10.     var findIndex=function(id){  
  11.         var index=-1;  
  12.         angular.forEach($scope.cartList,function(item,key){  
  13.             if(item.id == id){  
  14.                 index=key;  
  15.                 return;  
  16.             }  
  17.         });return index;  
  18.     };  
  19.   
  20.     //从cartList数组中删除一项产品  
  21.     $scope.remove=function(id){  
  22.         var index=findIndex(id);  
  23.         if(index != -1){  
  24.             $scope.cartList.splice(index,1);  
  25.         }  
  26.     };  
  27.   
  28.     //为某个商品添加一个数量  
  29.     $scope.addOne=function(id){  
  30.         var index=findIndex(id);  
  31.         if(index != -1){  
  32.             $scope.cartList[index].quantity ++;  
  33.         }  
  34.     };  
  35.     //位某个商品减少一个数量  
  36.     $scope.reduceOne=function(id){  
  37.         var index=findIndex(id);  
  38.         if(index != -1){  
  39.             var item=$scope.cartList[index];  
  40.             if(item.quantity > 1){  
  41.                 item.quantity --;  
  42.             }else{  
  43.                 var returnKey=confirm("删除该商品？");  
  44.                 if(returnKey){  
  45.                     $scope.remove(item.id);  
  46.                 }  
  47.             }  
  48.         }  
  49.     };  
  50.   
  51.     //总购买价  
  52.     $scope.totalCost=function(){  
  53.         var total=0;  
  54.         angular.forEach($scope.cartList,function(item,key){  
  55.             total += item.quantity * item.price;  
  56.         });return total;  
  57.     };  
  58.     //总购买数量  
  59.     $scope.totalCount=function(){  
  60.         var count=0;  
  61.         angular.forEach($scope.cartList,function(item,key){  
  62.             count += item.quantity;  
  63.         });return count;  
  64.     };  
  65.   
  66.     //监听输入框更改事件避免输入负数或字符串  
  67.     $scope.$watch('cartList',function(newValue,oldValue){  
  68.         console.log( "$scope.cartList === newValue "+ ($scope.cartList === newValue) ); //永远为ture newValue指向cartList  
  69.         console.log( "$scope.cartList === oldValue "+ ($scope.cartList === oldValue) ); //页面初始化后为true 一旦改动永远为false  
  70.         angular.forEach(newValue,function(item,key){  
  71.             if( isNaN(item.quantity) ){  
  72.                 item.quantity=oldValue[key].quantity;  
  73.             }  
  74.             else if( item.quantity <= 0 ){  
  75.                 var returnKey=confirm("删除该商品？");  
  76.                 if(returnKey){  
  77.                     $scope.remove(item.id);  
  78.                 }else{  
  79.                     item.quantity=oldValue[key].quantity;  
  80.                 }  
  81.             }  
  82.         });  
  83.     },true);  
  84.   
  85. });  

页面中的指令：

 

ng-app         指定一个应用程序
ng-controller  指定一个控制器
ng-show        值表达式为 true 时，显示本Dom
ng-repeat      重复本Dom
ng-click       指定一个单击事件

posted on 2017-07-12 17:48  熊熊之火  阅读(937)  评论(0)  编辑  收藏  举报

导航