关于Angularjs做的一个购物车小例子

前段时间研究过这个,并且写了一个购物车的小例子,今天一个偶然的机会提起,可惜忘了差不多了,糊里糊涂的也没说清楚。翻出来,提醒下自己,保持一颗学习的心,顺便再复习一遍。

先上一个最终的效果图

关于Angularjs做的一个购物车小例子

构图比较简单,主要功能:

1. 点击购买的时候 进行数量的增加或者条目的增加,同时总价格变化;

2. 进行删除的时候,删除当前条目,总价变化;

3. 进行数目增加减少的时候,总价格变化;

好,下面说代码,抓耳挠腮的想想,有点久远印象不太深刻了;

关于angular的基本用法,这里就不唠叨了,网上好多的教程;

首先是商品列表,这里自己随意列举了一些 

关于Angularjs做的一个购物车小例子
<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>
关于Angularjs做的一个购物车小例子

主要的html代码,重新注释下也让自己再熟悉一遍

关于Angularjs做的一个购物车小例子
<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>
关于Angularjs做的一个购物车小例子

我记得,当时觉得比较麻烦的是 input没有ng-blur事件;

看下js代码

关于Angularjs做的一个购物车小例子
     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);               
             }             
         });
关于Angularjs做的一个购物车小例子

有工作任务了,先把手上活告一个段落再回来看;

关于Angularjs做的一个购物车小例子

上一篇:【javascript基础】原型与原型链


下一篇:转:PHP变量作用域(花括号、global、闭包)