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.buildFragment使用方法及思路分析
Jan 07 Javascript
扩展IE中一些不兼容的方法如contains、startWith等等
Jan 09 Javascript
jQuery实现列表自动滚动循环滚动展示新闻
Aug 22 Javascript
JavaScript中的全局对象介绍
Jan 01 Javascript
JavaScript制作windows经典扫雷小游戏
Mar 31 Javascript
JavaScript替换当前页面的方法
Apr 03 Javascript
vue.js表格分页示例
Oct 18 Javascript
利用iscroll4实现轮播图效果实例代码
Jan 11 Javascript
Vuex 单状态库与多模块状态库详解
Dec 11 Javascript
微信小程序实现动态显示和隐藏某个控件功能示例
Dec 14 Javascript
vue单页应用的内存泄露定位和修复问题小结
Aug 02 Javascript
VUE异步更新DOM - 用$nextTick解决DOM视图的问题
Nov 06 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
php处理restful请求的路由类分享
2014/02/27 PHP
详解PHP的Yii框架的运行机制及其路由功能
2016/03/17 PHP
PHP中in_array函数使用的问题与解决办法
2016/09/11 PHP
Laravel中日期时间处理包Carbon的简单使用
2017/09/21 PHP
Yii2 queue的队列使用详解
2019/07/19 PHP
利用ASP发送和接收XML数据的处理方法与代码
2007/11/13 Javascript
Extjs中DisplayField的日期或者数字格式化扩展
2010/09/03 Javascript
js正则表达式匹配数字字母下划线等
2015/04/14 Javascript
JavaScript中setTimeout和setInterval函数的传参及调用
2016/03/11 Javascript
Bootstrap中的fileinput 多图片上传及编辑功能
2016/09/05 Javascript
Javascript基础回顾之(三) js面向对象
2017/01/31 Javascript
Angular自定义组件实现数据双向数据绑定的实例
2017/12/11 Javascript
MUI 实现侧滑菜单及其主体部分上下滑动的方法
2018/01/25 Javascript
vue使用localStorage保存登录信息 适用于移动端、PC端
2019/05/27 Javascript
微信小程序使用自定义组件导航实现当前页面高亮
2020/01/02 Javascript
jquery实现进度条状态展示
2020/03/26 jQuery
JS事件循环机制event loop宏任务微任务原理解析
2020/08/04 Javascript
[01:10:58]KG vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
python脚本设置超时机制系统时间的方法
2016/02/21 Python
python字符类型的一些方法小结
2016/05/16 Python
python获取当前用户的主目录路径方法(推荐)
2017/01/12 Python
Python脚本实现自动将数据库备份到 Dropbox
2017/02/06 Python
Python 数据结构之旋转链表
2017/02/25 Python
python+ffmpeg批量去视频开头的方法
2019/01/09 Python
python+selenium+chromedriver实现爬虫示例代码
2020/04/10 Python
Kears 使用:通过回调函数保存最佳准确率下的模型操作
2020/06/17 Python
Python装饰器结合递归原理解析
2020/07/02 Python
欧洲高端品牌直销店:Fashionesta
2016/08/31 全球购物
英国袜子店:Sock Shop
2017/01/11 全球购物
Infababy英国:婴儿推车、Travel System婴儿车和婴儿汽车座椅销售
2018/05/23 全球购物
就业协议书怎么填
2014/04/11 职场文书
2014年教学工作总结
2014/11/13 职场文书
2015年度个人思想工作总结
2015/04/08 职场文书
python第三方网页解析器 lxml 扩展库与 xpath 的使用方法
2021/04/06 Python
详解MySQL事务的隔离级别与MVCC
2021/04/22 MySQL
《艾尔登法环》1.03.3补丁上线 碎星伤害调整
2022/04/06 其他游戏