angular购物车
1 <body ng-app> 2 3 <div class="container" ng-controller="carController"> 4 <table class="table" ng-show="cart.length"> 5 <thead> 6 <tr> 7 <th>产品编号</th> 8 <th>产品名字</th> 9 <th>购买数量</th> 10 <th>产品单价</th> 11 <th>产品总价</th> 12 <th>操作</th> 13 </tr> 14 15 </thead> 16 <tbody> 17 <tr ng-repeat="item in cart"> 18 <td>{{item.id}}</td> 19 <td>{{item.name}}</td> 20 <td> 21 <button type="button" ng-click="reduce(item.id)" class="btn btn-primary">-</button> 22 <input type="text" value=" {{item.quantity}}" ng-model="item.quantity"/> 23 <button type="button" ng-click="add(item.id)" class="btn btn-primary">+</button> 24 </td> 25 <td>{{item.price}}</td> 26 <td>{{item.price * item.quantity}}</td> 27 <td> 28 <button type="button" ng-click="remove(item.id)" class="btn btn-primary">移除</button> 29 </td> 30 </tr> 31 <tr> 32 33 <td>总购买价</td> 34 <td>{{totalPrice()}}</td> 35 <td>总购买数</td> 36 <td>{{totalQuantity()}}</td> 37 <td colspan="2"> 38 <button type="button" ng-click="clearAll()" class="btn btn-primary">清空购购物车</button> 39 </td> 40 41 </tr> 42 </tbody> 43 </table> 44 <p ng-show="!cart.length">你的购物车为空</p> 45 </div> 46 47 </body>
1 /** 2 * Created by bh on 2016/4/24. 3 */ 4 var carController = function($scope){ 5 $scope.cart = [ 6 { 7 id:1000, 8 name:"iphone5s", 9 quantity:3, 10 price:4300 11 }, 12 { 13 id:3300, 14 name:"iphone5", 15 quantity:30, 16 price:3300 17 }, 18 { 19 id:232, 20 name:"mac", 21 quantity:3, 22 price:23000 23 }, 24 { 25 id:1400, 26 name:"ipad", 27 quantity:5, 28 price:6900 29 } 30 ]; 31 32 //计算总价 33 $scope.totalPrice= function(){ 34 var total = 0; 35 angular.forEach($scope.cart,function(item){ 36 total +=item.quantity * item.price; 37 }) 38 return total; 39 } 40 //计算总价 41 $scope.totalQuantity= function(){ 42 var total = 0; 43 angular.forEach($scope.cart,function(item){ 44 total +=parseInt(item.quantity); 45 }) 46 return total; 47 } 48 var findIndex =function(id){ 49 var index = -1; 50 angular.forEach($scope.cart,function(item,key){ 51 if(item.id === id){ 52 index = key; 53 54 } 55 }); 56 return index; 57 } 58 $scope.add=function(id){ 59 var index = findIndex(id); 60 if(index!== -1){ 61 ++$scope.cart[index].quantity; 62 } 63 } 64 $scope.reduce=function(id){ 65 var index = findIndex(id); 66 if(index!== -1){ 67 var item = $scope.cart[index]; 68 if(item.quantity > 1){ 69 --item.quantity; 70 }else{ 71 var returnKey = confirm("是否从购物车内删除该商品"); 72 if(returnKey){ 73 $scope.remove(id) 74 } 75 } 76 77 } 78 } 79 80 //移除 81 $scope.remove=function(id){ 82 var index = findIndex(id) 83 84 if (index !== -1) { 85 $scope.cart.splice(index, 1) 86 } 87 } 88 $scope.$watch("cart",function(newValue,oldValue){ 89 angular.forEach(newValue,function(item,key){ 90 if(item.quantity < 1){ 91 var returnKey = confirm("是否从购物车内删除该商品"); 92 if(returnKey){ 93 $scope.remove(item.id) 94 }else{ 95 item.quantity = oldValue[key].quantity 96 } 97 } 98 }) 99 }) 100 101 $scope.clearAll=function(){ 102 $scope.cart = {} 103 } 104 105 106 }
格式：
1 var objs =[{a:1},{a:2}]; 2 angular.forEach(objs, function(data,index,array){ 3 //data等价于array[index] 4 console.log(data.a+'='+array[index].a); 5 });
参数如下：
objs：需要遍历的集合
data:遍历时当前的数据
index:遍历时当前索引
array:需要遍历的集合，每次遍历时都会把objs原样的传一次。
