相關(guān)文章推薦

Angular學(xué)習(xí)第一天：登錄功能
Angular學(xué)習(xí)第二天：tab標(biāo)簽頁切換效果
Angular學(xué)習(xí)第三天：用戶地址管理

今天我們來做一下電商網(wǎng)站常見的購物車功能

實現(xiàn)功能，購物車相信大家都熟悉（作為剁手黨我還是要神秘的笑一下....）

• 顯示商品列表
• 商品添加進(jìn)購物車
• 購物車內(nèi)商品數(shù)量的增減
• 當(dāng)購物車內(nèi)沒有商品時，顯示去購物
• 購物車內(nèi)商品總件數(shù)和總價的計算及顯示

首先我們來看下實際運行效果

商品列表.png

購物車頁面.png

頁面相關(guān)樣式（不做贅述）

*{
    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;
}

頁面相關(guān)標(biāo)簽結(jié)構(gòu)

<body ng-app=""  ng-controller="myTabCtrl">
 <div class="pages">
     <div class="page" ng-show="focusIndex==0">
       <!--商品列表-->
        <div class="goods-list">
           <div class="goods-item" ng-repeat="item in goods">
              <div class="item-op">
                <img ng-src="{{item.url}}">
              </div>
              <div class="item-con">
                <p>{{item.name}}</p>
                <p>
                <span class="c_ff4354">￥{{item.price}}</span>
                <span class="f-r c_ccc add" ng-click="addToShopcar(item)">+</span>
              </p>
              </div>
           </div>
        </div>
       <!--商品列表/-->
     </div>
     <div class="page" ng-show="focusIndex==1">游記內(nèi)容</div>
     <div class="page" ng-show="focusIndex==2">
       <!--購物車商品列表-->
       <div class="total-info">總商品數(shù)：{{shopCarItems.length}} 件;總價：￥<span class="c_ff4354">{{totalMoney}}</span>元</div>
        <div class="shopcar-items">
           <div class="shopcar-item" ng-repeat="item in shopCarItems">
              <div class="item-img">
                <img ng-src="{{item.url}}">
              </div>
              <div class="item-con">
                <p>{{item.name}}</p>
                <p>
                  <span class="c_ff4354">￥{{item.price}}</span>
                  <span class="f-r c_ccc">
                  <span class="mul-btn" ng-click="mulGoodAmount($index)">-</span>
                  {{item.amount}}
                  <span class="add-btn"  ng-click="addToShopcar(item)">+</span>
                </span>
              </p>
              </div>
           </div>
        </div>
       <!--購物車商品列表/-->

       <div class="nothing" ng-if="shopCarItems.length==0">
           <div ng-click="focus(0)">去購物</div>
       </div>

     </div>
     <div class="page" ng-show="focusIndex==3">個人中心內(nèi)容</div>
 </div>
  <nav>
   <a class="home" ng-class="{'active':focusIndex==0}" href="javascript:;" ng-click="focus(0)"><i></i>優(yōu)選圈</a>
   <a class="topics" ng-class="{'active':focusIndex==1}" href="javascript:;" ng-click="focus(1)"><i></i>游記</a>
   <a class="message" ng-class="{'active':focusIndex==2}" href="javascript:;" ng-click="focus(2)"><i></i>購物車<span class="tip" ng-if="shopCarItems.length">{{shopCarItems.length}}</span></a>
   <a class="user" ng-class="{'active':focusIndex==3}" href="javascript:;" ng-click="focus(3)"><i></i>個人中心</a>
  </nav>
</body>

頁面的angular代碼诉濒、實現(xiàn)邏輯及解釋

<script>
//顯示操作成功
      function showAltMsg(msg){
        var toast=document.getElementById('toast');
        if(toast){
          toast.innerHTML=msg;
          toast.style.display="block";
        }else{
          var msgDom=document.createElement('div');
          msgDom.id='toast';
          msgDom.innerHTML=msg;
          var body=document.getElementsByTagName('body')[0]
          body.appendChild(msgDom);
        }

        setTimeout(function(){
          var toast=document.getElementById('toast');
          toast.style.display="none";
        },2000);
      }


    function myTabCtrl($scope) {
        //設(shè)置當(dāng)前聚焦的索引
        $scope.focusIndex = 0;
        //設(shè)置聚焦方法
        $scope.focus = function(index) {
            $scope.focusIndex = index;
        }
        //默認(rèn)商品列表
        $scope.goods = [
            {
                price: 28,
                id: 1,
                name: "滿減【三只松鼠_琥珀核桃仁165g】堅果特產(chǎn)休閑零食紙",
                url: 'http://img10.360buyimg.com/n1/jfs/t2821/18/1316712878/430655/c65ffb7/573c06a0N956686b0.jpg',
                left: '4/50'
            }, {
                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',
                left: '4/50'
            }, {
                price: 28,
                id: 3,
                name: "旺旺旺仔牛奶2940ml原味245 ml× 8罐+蘋果味245ml×4罐",
                url: 'http://img14.360buyimg.com/n1/jfs/t2623/71/2055615738/228070/6f87f326/57553c7aNa8b4b9c3.jpg',
                left: '4/50'
            }, {
                price: 28,
                id: 4,
                name: "滿減【三只松鼠_琥珀核桃仁165g】堅果特產(chǎn)休閑零食紙",
                url: 'http://img10.360buyimg.com/n1/jfs/t2821/18/1316712878/430655/c65ffb7/573c06a0N956686b0.jpg',
                left: '4/50'
            }, {
                price: 28,
                id: 5,
                name: "滿減【三只松鼠_琥珀核桃仁165g】堅果特產(chǎn)休閑零食紙",
                url: 'http://img10.360buyimg.com/n1/jfs/t2821/18/1316712878/430655/c65ffb7/573c06a0N956686b0.jpg',
                left: '4/50'
            }, {
                price: 28,
                id: 6,
                name: "旺旺旺仔牛奶2940ml原味245 ml× 8罐+蘋果味245ml×4罐",
                url: 'http://img14.360buyimg.com/n1/jfs/t2623/71/2055615738/228070/6f87f326/57553c7aNa8b4b9c3.jpg',
                left: '4/50'
            }, {
                price: 28,
                id: 7,
                name: "滿減【三只松鼠_琥珀核桃仁165g】堅果特產(chǎn)休閑零食紙",
                url: 'http://img10.360buyimg.com/n1/jfs/t2821/18/1316712878/430655/c65ffb7/573c06a0N956686b0.jpg',
                left: '4/50'
            }, {
                price: 28,
                id: 8,
                name: "旺旺旺仔牛奶2940ml原味245 ml× 8罐+蘋果味245ml×4罐",
                url: 'http://img14.360buyimg.com/n1/jfs/t2623/71/2055615738/228070/6f87f326/57553c7aNa8b4b9c3.jpg',
                left: '4/50'
            }, {
                price: 28,
                id: 9,
                name: "滿減【三只松鼠_琥珀核桃仁165g】堅果特產(chǎn)休閑零食紙",
                url: 'http://img10.360buyimg.com/n1/jfs/t2821/18/1316712878/430655/c65ffb7/573c06a0N956686b0.jpg',
                left: '4/50'
            }
        ]
        //購物車商品；列表
        $scope.shopCarItems = [
            {
                price: 28,
                id: 1,
                name: "滿減【三只松鼠_琥珀核桃仁165g】堅果特產(chǎn)休閑零食紙皮核桃",
                url: 'http://img10.360buyimg.com/n1/jfs/t2821/18/1316712878/430655/c65ffb7/573c06a0N956686b0.jpg',
                amount: 2
            }, {
                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
            }
        ]
        //添加商品到購物車
        $scope.addToShopcar = function(item) {
            var realIndex = $scope.getRealIndex(item.id);
            
            /**
              得到的真實索引>=0則代表商品已經(jīng)在購物車內(nèi)
              若已經(jīng)在則增加商品數(shù)量
              若不在則增加一個商品條目
          **/
            if (realIndex >= 0) {
                $scope.shopCarItems[realIndex].amount += 1;
            } else {
                item.amount = 1;
                $scope.shopCarItems.push(item);
            }
            //增加商品數(shù)量或條目則重新計算購物車商品總金額
            $scope.getTotalMoney();
            showAltMsg("添加到購物車成功");
        }
        //獲得商品在購物車中的真實索引
        $scope.getRealIndex = function(id) {
            var realIndex = -1;
            for (var i = 0; i < $scope.shopCarItems.length; i++) {
                if ($scope.shopCarItems[i].id == id) {
                    realIndex = i;
                    break;
                }
            }
            return realIndex;
        }
        //計算購物車總額
        $scope.getTotalMoney = function() {
            var sum = 0;
            for (var i = 0; i < $scope.shopCarItems.length; i++) {
                sum += $scope.shopCarItems[i].price * $scope.shopCarItems[i].amount
            }
            $scope.totalMoney = sum;
        };

        //初次加載計算一下總金額
        $scope.getTotalMoney();

        //減少購物車商品數(shù)量
        $scope.mulGoodAmount = function(index) {
            $scope.shopCarItems[index].amount -= 1;
            //商品數(shù)量減少到0時直接刪除商品
            if ($scope.shopCarItems[index].amount == 0) {
                $scope.shopCarItems.splice(index, 1);
            }
            //減少商品數(shù)量之后重新計算購物車商品總金額
            $scope.getTotalMoney();
        }
    }
</script>

主要指令

• ng-app
• ng-controller
• ng-repeat
• ng-if
• ng-src 這是一個未講過的指令槽地，這個指令的功能是給img標(biāo)簽綁定 src屬性

//數(shù)據(jù)
{
  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
}
<img ng-src="{{item.url}}" />

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