zoukankan      html  css  js  c++  java
  • 关于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="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);               
                 }             
             });

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

  • 相关阅读:
    Rainmeter 雨滴桌面 主题分享
    行人检測之HOG特征(Histograms of Oriented Gradients)
    const和readonly差别
    ADB命令解析
    Java实现 蓝桥杯VIP 算法训练 接水问题
    Java实现 蓝桥杯VIP 算法训练 星际交流
    Java实现 蓝桥杯VIP 算法训练 星际交流
    Java实现 蓝桥杯VIP 算法训练 星际交流
    Java实现 蓝桥杯VIP 算法训练 星际交流
    Java实现 蓝桥杯VIP 算法训练 星际交流
  • 原文地址:https://www.cnblogs.com/lxin/p/3529854.html
Copyright © 2011-2022 走看看