angularJs 购物车模型
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <link rel="stylesheet" href="vendor/bootstrap3/css/bootstrap.min.css" /> 6 <script type="text/javascript" src="vendor/angularjs/angular.min .js"></script> 7 <script type="text/javascript"> 8 var cartController = function($scope){ 9 $scope.cart= [ 10 { 11 id:1000, 12 name:"iphone6s", 13 quantity:3, 14 price:6088 15 }, 16 { 17 id:2000, 18 name:"iphone5", 19 quantity:30, 20 price:5088 21 }, 22 { 23 id:3000, 24 name:"imac", 25 quantity:10, 26 price:23000 27 }, 28 { 29 id:4000, 30 name:"ipad", 31 quantity:6, 32 price:6900 33 } 34 ] 35 /*计算总价*/ 36 $scope.totalPrice = function(){ 37 var total = 0; 38 angular.forEach($scope.cart,function(item){ 39 total += item.price*item.quantity; 40 }) 41 return total; 42 } 43 /*计算总数量*/ 44 $scope.totalQuantity = function(){ 45 var total = 0; 46 angular.forEach($scope.cart,function(item){ 47 total += item.quantity; 48 }) 49 return total; 50 } 51 $scope.remove = function(id){ 52 var index = findIndex(id); 53 if(index!== -1){ 54 $scope.cart.splice(index,1); 55 } 56 } 57 $scope.add = function(id){ 58 var index = findIndex(id); 59 if(index !== -1){ 60 ++$scope.cart[index].quantity; 61 } 62 } 63 $scope.reduce = function(id){ 64 var index = findIndex(id); 65 if(index !== -1){ 66 var item = $scope.cart[index]; 67 if(item.quantity>1){ 68 --item.quantity; 69 }else{ 70 var returnkey = confirm("从购物车中删除该商品吗？"); 71 if(returnkey){ 72 $scope.remove(id); 73 } 74 } 75 } 76 } 77 /* 78 *查找元素索引 79 */ 80 var findIndex = function(id){ 81 var index = -1; 82 angular.forEach($scope.cart,function(item,key){ 83 if(item.id === id){ 84 index = key; 85 return; 86 } 87 }) 88 return index; 89 } 90 /* 监听表单数字大小 小于1 提示是否删除 */ 91 $scope.$watch("cart",function(newValue,oldValue){ 92 angular.forEach(newValue,function(item,key){ 93 if(item.quantity<1){ 94 var returnkey = confirm("从购物车中删除该商品吗？"); 95 if(returnkey){ 96 $scope.remove(item.id); 97 }else{ 98 item.quantity=oldValue[key].quantity; 99 } 100 101 } 102 }) 103 },true) 104 } 105 </script> 106 </head> 107 <body ng-app> 108 <div class="container" ng-controller="cartController"> 109 <table class="table" ng-show="cart.length"> 110 <thead> 111 <tr> 112 <th>产品编号</th> 113 <th>产品名字</th> 114 <th>购买数量</th> 115 <th>产品单价</th> 116 <th>产品总价</th> 117 <th>操作</th> 118 </tr> 119 </thead> 120 <tbody> 121 <tr ng-repeat="item in cart"> 122 <td>{{item.id}}</td> 123 <td>{{item.name}}</td> 124 <td> 125 <button type="button" class="btn btn-primary" ng-click="reduce(item.id)">-</button> 126 <input type="text" value="{{totalQuantity()}}" ng-model="item.quantity" maxlength="4"/> 127 <button type="button" class="btn btn-primary" ng-click="add(item.id)">+</button> 128 </td> 129 <td>{{item.price}}</td> 130 <td>{{item.price * item.quantity}}</td> 131 <td> 132 <button type="button" ng-click="remove(item.id)" class="btn btn-danger">移除</button> 133 </td> 134 </tr> 135 <tr> 136 <td>总购买价</td> 137 <td>{{totalPrice()}}</td> 138 <td>总购买数量</td> 139 <td> 140 {{totalQuantity()}} 141 </td> 142 <td colspan="2"> 143 <button type="button" class="btn btn-danger" ng-click="cart={}">清空购物车</button> 144 </td> 145 </tr> 146 </tbody> 147 </table> 148 <p ng-show="!cart.length"> 您的购物车为空！</p> 149 </div> 150 151 </body> 152 </html>
页面展示效果：
-------------the end---------
