• 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       指定一个单击事件
  • 相关阅读:
    边缘检测算法——Canny和LoG边缘检测算法
    Java读书笔记03 输入输出
    CMake入门
    二叉树及二叉树的遍历
    Java读书笔记11 图形程序——颜色 字体 图像
    XNA实现骨骼动画 归纳总结
    Java读书笔记09 内部类
    Java读书笔记02 基础知识
    Java用户界面 模型视图控制器（MVC）模式
    简单理解传值和传引用
  • 原文地址：https://www.cnblogs.com/huangshikun/p/7156744.html
Copyright © 2020-2023  润新知