angularjs实现简单的购物车功能


Posted in Javascript onSeptember 21, 2017

本文实例为大家分享了angularjs实现购物车功能的具体代码,供大家参考,具体内容如下

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    *{
      margin: 0;
      padding: 0;
      margin-left: 10px;
    }
    li{
      list-style: none;
    }
    .add,.reduce{
      display: inline-block;
      width: 20px;
      height: 20px;
      border: 1px solid #000;
      text-align: center;
    }
    .line{
      border-bottom: 1px solid #000;
    }
  </style>
  <script src="angular-1.5.5/angular.min.js"></script>
  <script>
    var myapp=angular.module("myapp",[]);
    myapp.controller("myCtrl",function($scope){
      $scope.cart=[
        {
          "shopName":"趣艺工坊",
          "checked":false,
          "goods":[
            {
              "goodsName":"纯手工制作木质时钟精致家具装饰摆件",
              "pic":"images/cart_01.jpg",
              "price":150.00,
              "number":1,
              "checked":false
            },
            {
              "goodsName":"木质蓝牙音箱包邮实木家具装饰摆件",
              "pic":"images/cart_02.jpg",
              "price":119.00,
              "number":2,
              "checked":true
            },
            {
              "goodsName":"装饰木雕,独特趣味设计家具装饰摆件",
              "pic":"images/cart_03.jpg",
              "price":120.00,
              "number":0,
              "checked":false
            }
          ]
        },
        {
          "shopName":"邻街纸艺",
          "checked":false,
          "goods":[
            {
              "goodsName":"纯手工制作木质时钟精致家具装饰摆件",
              "pic":"images/cart_04.jpg",
              "price":89.00,
              "number":2,
              "checked":true
            },
            {
              "goodsName":"木质蓝牙音箱包邮实木家具装饰摆件",
              "pic":"images/cart_05.jpg",
              "price":189.00,
              "number":1,
              "checked":false
            }
          ]
        },
        {
          "shopName":"纸来我往",
          "checked":true,
          "goods":[
            {
              "goodsName":"纯手工制作木质时钟精致家具装饰摆件",
              "pic":"images/cart_06.jpg",
              "price":289.00,
              "number":3,
              "checked":true
            }
          ]
        }

      ];
      //点击加减按钮,数量加减;点击删除按钮,删除商品
      $scope.reduce=function(goods){
        goods.number--;
        if (goods.number<=0) goods.number=0;
        $scope.totalMoney();
      };
      $scope.add=function(kind){
        kind.number++;
        $scope.totalMoney();
      };
      $scope.delete=function(item,index){
        item.goods.splice(index,1)
      };
      /*总金额计算*/
      $scope.totalMoney=function(){
        var total=0;
        for(var i=0;i<$scope.cart.length;i++){
          for(var j=0;j<$scope.cart[i].goods.length;j++){
            if($scope.cart[i].goods[j].checked){
              total+=$scope.cart[i].goods[j].price*$scope.cart[i].goods[j].number;
            }
          }
        }
        return total;
      };
      /*商铺选择*/
      $scope.shopChecked=function(item){
        if(item.checked==true){
          for(var i=0;i<item.goods.length;i++){
            item.goods[i].checked=true
          }
        }else {
          for(var i=0;i<item.goods.length;i++){
            item.goods[i].checked=false;
          }
        }
      };
      /*全部选择*/
      $scope.allChecked=function(){
        if($scope.allCheck){
          for(var i=0;i<$scope.cart.length;i++){
            $scope.cart[i].checked=true;
            for(var j=0;j<$scope.cart[i].goods.length;j++){
              $scope.cart[i].goods[j].checked=true;
            }
          }
        }else {
          for(var i=0;i<$scope.cart.length;i++){
            $scope.cart[i].checked=false;
            for(var j=0;j<$scope.cart[i].goods.length;j++){
              $scope.cart[i].goods[j].checked=false;
            }
          }
        }
      };
    })
  </script>
</head>
<body ng-app="myapp" ng-controller="myCtrl">
<div><input type="checkbox" ng-model="allCheck" ng-click="allChecked()">总金额:<span>{{ totalMoney() | currency:"¥"}}</span></div>
<div ng-repeat="item in cart" class="line">
  <div><input type="checkbox" ng-model="item.checked" ng-click="shopChecked(item)"><span>{{item.shopName}}</span></div>
  <ul>
    <li ng-repeat="kind in item.goods">
      <input type="checkbox" ng-model="kind.checked"><span>{{kind.goodsName}}</span>
      <p>{{kind.price}}</p>
      <p><span class="add" ng-click="add(kind)">+</span>{{kind.number}}<span class="reduce" ng-click="reduce(kind)">-</span></p>
      <p ng-click="delete(item,$index)">删除</p>
    </li>
  </ul>
</div>

</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery.alert 弹出式复选框实现代码
Jun 15 Javascript
JavaScript中两种链式调用实现代码
Jan 12 Javascript
javascript中的对象创建 实例附注释
Feb 08 Javascript
javascript中为某个元素指定事件的三种方式
Aug 07 Javascript
javascript 面向对象封装与继承
Nov 27 Javascript
jQuery中each()方法用法实例
Dec 27 Javascript
jQuery插件windowScroll实现单屏滚动特效
Jul 14 Javascript
BootStrap的弹出框(Popover)支持鼠标移到弹出层上弹窗层不隐藏的原因及解决办法
Apr 03 Javascript
微信小程序 生命周期和页面的生命周期详细介绍
Jan 19 Javascript
Node.Js生成比特币地址代码解析
Apr 21 Javascript
对layui数据表格动态cols(字段)动态变化详解
Oct 25 Javascript
js实现上下左右键盘控制div移动
Jan 16 Javascript
JS实现前端缓存的方法
Sep 21 #Javascript
JS基于正则表达式实现的密码强度验证功能示例
Sep 21 #Javascript
jQuery实现的简单动态添加、删除表格功能示例
Sep 21 #jQuery
详解react服务端渲染(同构)的方法
Sep 21 #Javascript
详解node单线程实现高并发原理与node异步I/O
Sep 21 #Javascript
删除table表格行的实例讲解
Sep 21 #Javascript
js对象实例详解(JavaScript对象深度剖析,深度理解js对象)
Sep 21 #Javascript
You might like
Yii 2.0实现联表查询加搜索分页的方法示例
2017/08/02 PHP
使用laravel根据用户类型来显示或隐藏字段
2019/10/17 PHP
实用的JS正则表达式(手机号码/IP正则/邮编正则/电话等)
2013/01/11 Javascript
JS实现切换标签页效果实例代码
2013/11/01 Javascript
js函数返回多个返回值的示例代码
2013/11/05 Javascript
JavaScript通过元素索引号删除数组中对应元素的方法
2015/03/18 Javascript
基于JS实现简单的样式切换效果代码
2015/09/04 Javascript
jQuery插件实现文字无缝向上滚动效果代码
2016/02/25 Javascript
JS获取IMG图片高宽的简单实例
2016/05/17 Javascript
动态生成的DOM不会触发onclick事件的原因及解决方法
2016/08/06 Javascript
javascript使用闭包模拟对象的私有属性和方法
2016/10/05 Javascript
jquery文字填写自动高度的实现方法
2016/11/07 Javascript
JSON字符串和JSON对象相互转化实例详解
2017/01/05 Javascript
在点击div中的p时,如何阻止事件冒泡
2017/02/07 Javascript
vue项目中引入noVNC远程桌面的方法
2018/03/05 Javascript
详解vue配置后台接口方式
2019/03/29 Javascript
Vue项目实现简单的权限控制管理功能
2019/07/17 Javascript
Python版实现微信公众号扫码登陆
2020/05/28 Javascript
Python线性拟合实现函数与用法示例
2018/12/13 Python
Python生成rsa密钥对操作示例
2019/04/26 Python
Python进程间通信Queue消息队列用法分析
2019/05/22 Python
python getopt模块使用实例解析
2019/12/18 Python
解决Jupyter Notebook开始菜单栏Anaconda下消失的问题
2020/04/13 Python
python中常用的数据结构介绍
2021/01/12 Python
天逸系统(武汉)有限公司Java笔试题
2015/12/29 面试题
国贸专业个人求职信范文
2014/01/08 职场文书
新郎新娘婚礼答谢词
2014/01/11 职场文书
迟到检讨书400字
2014/01/13 职场文书
委托书怎样写
2014/08/30 职场文书
纪念一二九运动演讲稿
2014/09/16 职场文书
离婚财产处理协议书
2014/09/30 职场文书
小学生毕业评语
2014/12/26 职场文书
横空出世观后感
2015/06/09 职场文书
公司董事任命书
2015/09/21 职场文书
标会主持词应该怎么写?
2019/08/15 职场文书
小程序实现悬浮按钮的全过程记录
2021/10/16 HTML / CSS