關於Angularjs做的一個購物車小例子

前段時間研究過這個，並且寫了一個購物車的小例子，今天一個偶然的機會提起，可惜忘了差不多了，糊里糊塗的也沒說清楚。翻出來，提醒下自己，保持一顆學習的心，順便再復習一遍。

先上一個最終的效果圖

構圖比較簡單，主要功能：

1. 點擊購買的時候 進行數量的增加或者條目的增加，同時總價格變化；

2. 進行刪除的時候，刪除當前條目，總價變化；

3. 進行數目增加減少的時候，總價格變化；

好，下面說代碼，抓耳撓腮的想想，有點久遠印象不太深刻了；

關於angular的基本用法，這里就不嘮叨了，網上好多的教程；

首先是商品列表，這里自己隨意列舉了一些 

<script>
      var items = [{
                  id : '1',
                  name : '蜂蜜',
                  price : 30.00
              },{
                  id : '2',
                  name : '黃豆醬',
                  price : 15.8
              },
              {
                  id : '3',
                  name : '護手霜',
                  price : 15.00
              },
              {
                  id : '4',
                  name : '保溫杯',
                  price : 29.9    
              },
              {
                  id : '5',
                  name : '鼠標',
                  price : 39.9
              },{
                  id : '6',
                  name : '米老頭',
                  price : 8.8    
          }];
      //購物車中的數據;
      var boughtList = {};
  </script>

主要的html代碼，重新注釋下也讓自己再熟悉一遍

<div class="wrap" ng-controller="showItem"><!-- ng-controller ng的語法 -->
        <h5>商品列表</h5>
        <div class="left itembox border" >
            <ul>             
                <li class="left" ng-repeat="value in items" item-id={{value.id}}>
                  <p>{{value.name}}</p>
                  <p> {{value.price}}</p>
                  <p>
　　　　　　　　　　　　<a href="javascript:void(0);" ng-click="buyAction($event);" 
　　　　　　　　　　　　　　name={{value.name}} price={{value.price}} item-id={{value.id}} >購買</a>
　　　　　　　　　　　　　　<!-- dom 事件時的$event 就相當於普通dom事件中的window.event 對象-->
　　　　　　　　　　</p>
                </li>
            </ul>
        </div>
　　　　
　　　　 <!-- 購物車中的數據 -->
        <div class="boughtlist border">
        <ul>             
            <li ng-repeat="value in boughtList" item-id={{value.id}}>
                <span>{{value.name}}</span>
                <span>{{value.price}}</span>
                <span style="width:100px;" item-id={{value.id}}>
                    <a href="javascript:void(0);" ng-click="value.num=value.num+1;changeNum($event,value.num);" >+</a> 
                    <input class="border" type="number" min=0 ng-model="value.num" ng-init="value.num=1" ng-change="changeNum(value.id,value.num);"/>
　　　　　　　　　　　　<!-- 這里的ng-change 是值發生變化時觸發的事件，其實這里我原先想處理成 一個自動的mvc過程，無果，只好加事件了-->
　　　　　　　　　　　　<a href="javascript:void(0);" ng-click="value.num=value.num-1;changeNum($event,value.num);">-</a>
                </span>
                <a href="javascript:void(0);" item-id={{value.id}} ng-click="delItem($event);" >刪除</a>                
            </li>
        </ul>
        <p ng-init=0 >總價格：{{ total | number:1}}</p> 
　　　　 <!-- angular的優勢體現，number：1也就是number數據，小數點后一位。-->
        </div>

我記得，當時覺得比較麻煩的是 input沒有ng-blur事件；

看下js代碼

　　　　　var ng = angular;
         var myapp = ng.module('myapp',[]);
         
         var common = {
             getTotal : function(total){ //每次重新清零 算出總價，這樣的話為什么還要傳total參數？當時怎么想的？
                 total = 0;
                 for(var k in boughtList){                     
                     if(boughtList[k]){
                         if(boughtList[k].num <=0){
                             boughtList[k].num = 0;
                         }
                         total += boughtList[k].num*boughtList[k].price;
                     }
                 } 
                 return total;
             }
         }
         
         myapp.controller('showItem',function($scope){
             $scope.items = items;
             $scope.boughtList = boughtList;
             $scope.total = 0;
             for(var k in boughtList){
                 if(boughtList[k]){
                     $scope.total += boughtList[k].num*boughtList[k].price;
                 }
             }
             $scope.buyAction = function($event){
                 var el = $event.target;
                 var id = el.getAttribute('item-id');                 
                 if(boughtList[id]){
                     boughtList[id].num += 1;                     
                 }else{
                     var arr = [];
                     arr.name = el.getAttribute('name');
                     arr.price = el.getAttribute('price');
                     arr.num = 1;   
                     arr.id = id;              
                     boughtList[id] = arr;
                 }
                 $scope.total = common.getTotal($scope.total);        
             }
             
             $scope.delItem = function($event){
                 var li = $event.target.parentNode;
                 li.parentNode.removeChild(li);
                 var id = $event.target.getAttribute('item-id');
                 if(boughtList[id]){
                     delete boughtList[id];
                 }                 
                 $scope.total = common.getTotal($scope.total);
             }
             $scope.changeNum = function($event,num){   
                 var id; 
                 if(typeof $event == 'string'){
                     id = $event;
                 }else{
                     id = $event.target.parentNode.getAttribute('item-id');  
                 }                            
                                              
                 boughtList[id].number = num;
                 $scope.total = common.getTotal($scope.total);               
             }             
         });

有工作任務了，先把手上活告一個段落再回來看；