Angular学习第四天

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

实现功能，购物车相信大家都熟悉

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

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

2180072-eb25ddf150bd3966.png
2180072-9dcf22670887d4c7.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;
}

页面相关标签结构

<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">
                ![]({{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">游记内容</div>
     <div class="page" ng-show="focusIndex==2">
       <!--购物车商品列表-->
       <div class="total-info">总商品数：{{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">
                ![]({{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">个人中心内容</div>
 </div>
  <nav>
   <a class="home" ng-class="{'active':focusIndex==0}" href="javascript:;" ng-click="focus(0)"><i></i>优选圈</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代码、实现逻辑及解释

<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) {
        //设置当前聚焦的索引
        $scope.focusIndex = 0;
        //设置聚焦方法
        $scope.focus = function(index) {
            $scope.focusIndex = index;
        }
        //默认商品列表
        $scope.goods = [
            {
                price: 28,
                id: 1,
                name: "满减【三只松鼠_琥珀核桃仁165g】坚果特产休闲零食纸",
                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】坚果特产休闲零食纸",
                url: 'http://img10.360buyimg.com/n1/jfs/t2821/18/1316712878/430655/c65ffb7/573c06a0N956686b0.jpg',
                left: '4/50'
            }, {
                price: 28,
                id: 5,
                name: "满减【三只松鼠_琥珀核桃仁165g】坚果特产休闲零食纸",
                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】坚果特产休闲零食纸",
                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】坚果特产休闲零食纸",
                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】坚果特产休闲零食纸皮核桃",
                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则代表商品已经在购物车内
              若已经在则增加商品数量
              若不在则增加一个商品条目
          **/
            if (realIndex >= 0) {
                $scope.shopCarItems[realIndex].amount += 1;
            } else {
                item.amount = 1;
                $scope.shopCarItems.push(item);
            }
            //增加商品数量或条目则重新计算购物车商品总金额
            $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();

        //减少购物车商品数量
        $scope.mulGoodAmount = function(index) {
            $scope.shopCarItems[index].amount -= 1;
            //商品数量减少到0时直接删除商品
            if ($scope.shopCarItems[index].amount == 0) {
                $scope.shopCarItems.splice(index, 1);
            }
            //减少商品数量之后重新计算购物车商品总金额
            $scope.getTotalMoney();
        }
    }
</script>

主要指令

  • 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
}
![]({{item.url}})
  • ng-click
  • ng-show
  • ng-class
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 157,012评论 4赞 359
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 66,589评论 1赞 290
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 106,819评论 0赞 237
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 43,652评论 0赞 202
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 51,954评论 3赞 285
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 40,381评论 1赞 210
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 31,687评论 2赞 310
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 30,404评论 0赞 194
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 34,082评论 1赞 238
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,355评论 2赞 241
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,880评论 1赞 255
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 28,249评论 2赞 250
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 32,864评论 3赞 232
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,007评论 0赞 8
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,760评论 0赞 192
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 35,394评论 2赞 269
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 35,281评论 2赞 259

推荐阅读更多精彩内容

  • AngularJS学习第四天：购物车功能
    相关文章推荐 Angular学习第一天：登录功能Angular学习第二天：tab标签页切换效果Angular学习第...
    小枫学幽默阅读 1,349评论 0赞 9
  • Angular学习笔记(4)—内置指令
    基础ng属性指令 布尔属性 布尔属性代表一个true或false值。当这个属性出现时，这个属性的值就是true（无...
    oWSQo阅读 1,142评论 0赞 0
  • angular转发
    AngularJS是什么？AngularJs（后面就简称ng了）是一个用于设计动态web应用的结构框架。首先，它是...
    200813阅读 1,515评论 0赞 3
  • 玩转angularJS框架
    AngularJS AngularJS概述 介绍 简称：ng Angular是一个MVC框架 其他前端框架： Vu...
    我爱开发阅读 2,309评论 0赞 8
  • Spring Cloud
    Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具（例如配置管理，服务发现，断路器，智...
    卡卡罗2017阅读 134,087评论 18赞 139