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---------

 

posted @ 2015-11-04 15:47  千城。  阅读(294)  评论(0编辑  收藏  举报