AngularJS学习第四天：购物车功能

相关文章推荐

Angular学习第一天：登录功能
Angular学习第二天：tab标签页切换效果
Angular学习第三天：用户地址管理

今天我们来做一下电商网站常见的购物车功能

实现功能，购物车相信大家都熟悉（作为剁手党我还是要神秘的笑一下....）

• 显示商品列表
• 商品添加进购物车
• 购物车内商品数量的增减
• 当购物车内没有商品时，显示去购物
• 购物车内商品总件数和总价的计算及显示

首先我们来看下实际运行效果

商品列表.png

购物车页面.png

页面相关样式（不做赘述）

*{
    padding:0px;
    margin:0px;
    font-family:Arial, 'Microsoft YaHei', Helvetica, 'Hiragino Sans GB';
}
html{
      font-size:10px;
}
.page{
    background-color:#f8f8f8;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 60px;
    overflow: auto;
    text-align: left;
    font-size: 2rem;
}
nav{
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
    height: 60px;
    display: flex;
    border-top:1px solid #ededed;
    background-color: #fff;
}

nav a:link,nav a:visited{
    text-decoration:none;
    flex: 1;
    text-align: center;
    box-sizing: border-box;
    /*      border-right: 1px solid #ededed;*/
    color: #666;
    padding-top: 5px;
    position: relative;
}
nav a:last-child{
    border-right: none;
}
nav a.active{
    color: #FF4354;
}
nav a i{
    display: block;
    margin: 0 auto;
    width: 25px;
    height: 25px;
}
nav a .tip{
    display: block;
    width: 10px;
    height: 10px;
    position: absolute;
    line-height: 10px;
    left: 50%;
    top: -5px;
    padding: 5px;
    transform: translateX(5px);
    background-color: #FF4354;
    color: #fff;
    border-radius: 50%;
}
nav a.home.active i{
      background: url('images/nav-home-on.png') no-repeat center;
      background-size: contain;
    }
nav a.home i{
      background: url('images/nav-home-off.png') no-repeat center;
      background-size: contain;
    }
nav a.topics.active i{
      background: url('images/nav-circle-on.png') no-repeat center;
      background-size: contain;
    }
nav a.topics i{
      background: url('images/nav-circle-off.png') no-repeat center;
      background-size: contain;
    }
nav a.message.active i{
      background: url('images/nav-message-on.png') no-repeat center;
      background-size: contain;
    }
nav a.message i{
      background: url('images/nav-message-off.png') no-repeat center;
      background-size: contain;
    }
nav a.user.active i{
      background: url('images/nav-mine-on.png') no-repeat center;
      background-size: contain;
    }
nav a.user i{
      background: url('images/nav-mine-off.png') no-repeat center;
      background-size: contain;
    }
.goods-list{
}
.goods-item{
  background-color: #ffffff;
  box-sizing: border-box;
  float: left;
  width: 50%;
  border-right: 1px solid #ededed;
  text-align: left;
}
.goods-item img{
      width: 100%;
}
.goods-item .item-op{
    color: #FF4354;
    padding: 10px 15px;
    border-bottom: 1px solid #ededed;
}
.goods-item  a:link,.goods-item a:visited{
    color: #FF4354;
}
.goods-item .item-con{
    padding: 10px 15px;
    border-bottom: 1px solid #ededed;
    color: #717171;
}
.goods-item .item-con .add{
  display: inline-block;
  padding: 5px 10px;
  background-color:#ff4354;
  color: #ffffff;
  border-radius: 50%;
  margin: 0px;
}
.c_333{
  color: #333;
}
.c_ccc{
  color: #ccc;
}
.c_ff4354{
  color:#ff4354;
}
.f-r{
  float: right;
}
.goods-item  .item-btn{
    display: inline-block;
    padding: 0px 10px;
    margin-left: 10px;
}
.shopcar-items{
  text-align: left;
}
.shopcar-item{
  font-size: 1.5rem;
  background-color: #ffffff;
  position: relative;
  padding: 10px 10px 10px 70px;
  border-bottom: 1px solid #ededed;
}
.shopcar-item img{
      width: 100%;
}
.shopcar-item .item-img{
  position: absolute;
  left: 10px;
  top:10px;
  width:50px;
  height:50px;
  border-radius: 5px;
}
.shopcar-item .item-con .mul-btn,.shopcar-item .item-con .add-btn{
  display: inline-block;
  padding: 5px 10px;
  background-color:#ff4354;
  color: #ffffff;
  border-radius: 5px;
  margin: 0px 5px;
}
.total-info{
  padding: 10px 15px;
  text-align: left;
}
  
.nothing{
  padding: 40px;
}
.nothing div{
  background-color: #ff4354;
  color: #ffffff;
  border-radius: 10px;
  margin: 0 auto;
  padding: 10px;
  text-align: center;
}

页面相关标签结构

 

     

       
        

           

              

                
              
              

                
{{item.name}}
                

                ￥{{item.price}}
                +
              
              
           
        
       
     
     
游记内容
     

       
       
总商品数：{{shopCarItems.length}} 件;总价：￥{{totalMoney}}元
        

           

              

                
              
              

                
{{item.name}}
                

                  ￥{{item.price}}
                  
                  -
                  {{item.amount}}
                  +
                
              
              
           
        
       

       

           
去购物
       

     
     
个人中心内容
 
  

   优选圈
   游记
   购物车{{shopCarItems.length}}
   个人中心
  

页面的angular代码、实现逻辑及解释

主要指令

• ng-app
• ng-controller
• ng-repeat
• ng-if
• ng-src 这是一个未讲过的指令，这个指令的功能是给img标签绑定 src属性

//数据
{
  price: 28,
  id: 2,
  name: "旺旺旺仔牛奶2940ml原味245 ml× 8罐+苹果味245ml×4罐",
  url: 'http://img14.360buyimg.com/n1/jfs/t2623/71/2055615738/228070/6f87f326/57553c7aNa8b4b9c3.jpg',
  amount: 1
}

• ng-click
• ng-show
• ng-class