使用AngularJS和HTML做淘宝中购物车的一些功能

使用AngularJS和HTML做淘宝的一些基础功能

今天用HTML和JS实现以下购物车，然后再用Angualrjs再去实现一下购物车的前端实现。

功能页面分析：

既然是做模仿淘宝购物车，肯定要先去分析一下淘宝的购物车页面,自己去淘宝卖了两件东西，看了下效果；

首先有一个全选功能，全选的时候会把所有的单选框给选中，并且会把所有的金额进行统计。

商品店铺的单选功能：在选择店铺的时候会把下面的商品全部都给选中，并且统计已经勾选的金额。

商品单选功能：选择该商品，并且统计金额，如果所有的商品都被勾选的话，会触发上面的全面框也被勾选，并且统计所有已经勾选的金额。

商品加减功能，对商品的金额进行加减。

删除功能，把该商品从购物车移出去(如果多选框都没选择的话,就弹窗提示"未选择商品",如果全选了也会弹窗"您是否要移除全部商品",都是一些小型的判断)。

购物车如果没有商品了,就会出现去逛逛,购买商品

这就是大概的功能要求,现在来看看代码如何实现:

首先是head部分的有导包(angular.js,也可以把路由的包也导进去,玩意用到了呢):

路由部分(路由功能没用到,就是供大家产考):

这里是主选择器的主要功能:

app.controller("myCtrl",function ($scope) {
    $scope.users = [{
        id:1,
        state:false,
        name:"张三",
        price:12.90,
        number:2,
        totalPrice:25.80
    }];
    
}/* 减数量 */
$scope.jian = function (index) {
    if ($scope.users[index].number > 1){
        $scope.users[index].number --;
    }else{
        if(confirm('确定移除此项嘛？')){
            $scope.users.splice(index,1);
        }

    }
}
/* 加数量 */
$scope.jia = function (index) {
    $scope.users[index].number ++;
}/* 总价 */
$scope.sum = function () {
    var allsum = 0;
    for(var i = 0;i<$scope.users.length; i++){
        allsum+= $scope.users[i].price*$scope.users[i].number;
    }
    return allsum;
}/* 删除 */
$scope.deleteAll = function () {
    if($scope.checks){
        if(confirm('您是否要清空购物车？')){
            $scope.users=[];
        }
        if ($scope.users.length == 0){
            alert("没了");
        }
    }else if($scope.checks==false){
        $scope.pan = false;
        for(p in $scope.users){
            if($scope.users[p].state){
                $scope.pan = true;
            }
        }
        if ($scope.pan){
            if(confirm('您是否将所选中商品移除购物车？')){
                for(var i = 0;i < $scope.users.length;i++){
                    if($scope.users[i].state){
                        $scope.users.splice(i,1)
                        i--;
                    }
                }
            }
        }else{
            alert("您还未选中商品");
        }
    }
}
/* 单个删除 */
$scope.delete = function (index) {
    if(confirm('您是否将该商品移除购物车?')){
        $scope.users.splice(index,1);
    }
}/* 判断全选 */
$scope.checks = "";
$scope.check = function () {
    if($scope.checks){
        for(i in $scope.users){
            $scope.users[i].state = true;
        }
    }else{
        for(i in $scope.users){
            $scope.users[i].state = false;
        }
    }
}
/* 单选取消,全选也取消 */
$scope.xvan = function (index) {
    if($scope.users[index].state == false){
        $scope.checks = false;
    }
}/* 排序 */
$scope.ji = 0;
$scope.order = "";
$scope.px = function (ji) {
    if($scope.ji%2==0){
        $scope.order = "price";
        $scope.ji++;
    }else{
        $scope.order = "-price";
        $scope.ji++;
    }
}
/* 判断数组长度然后显示或隐藏 */
$scope.getSize = function () {
    if($scope.users.length > 0){
        return false;
    }else{
        return true;
    }
}

看完以上的head部分的操作,应该知道body部分里的部门操作了吧,现在就来看看body部分的布局及一些操作:

    
      
        
        
        
        
        
       
         
         
         
         

            
        
          
          
          
          
我的购物车
            
        
          
          
          
          

        
          
          
          
          

        
          
          
          
          

        
          
          
          
          

            
        
          
          
          
          

            
        
          
          
          
          

           
           
                
         
           
                
         清空购物车
                
         
           
           
           
           

         
           
           
           
           

                
         
           
           
           
           

            
            
            
            
 
             
 
              
 
              
name
 
              
price
 
              
number
 
              
totalProce
 
              
option
 
             
 
            
            
            
            
            
 
             
 
              
 
              
{{user.name}}
 
              
{{user.price | currency:"￥:"}}
 
              
 
 
              
{{user.price*user.number | currency:"￥:"}}
 
              
删除
 
             
 
             
 
              
总价为:
 
             
 
            
           
           
           
           
            
        
          
          
          
          

            
        您的购物车为空，请先逛购物车
        
       
         
         
         
         

    
      
        
        
        
        

这就是body部分的全部布局及操作!

本章只是一个初步的淘宝的基础功能,仅供参考,如果对您有用请留下您的大拇指!!!

  祝您成功