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 相关文章推荐
js控制frameSet示例
Sep 10 Javascript
JQuery判断checkbox是否选中及其它复选框操作方法合集
Jun 01 Javascript
在JavaScript中用getMinutes()方法返回指定的分时刻
Jun 10 Javascript
简介JavaScript中Math.cos()余弦方法的使用
Jun 15 Javascript
javascript自定义in_array()函数实现方法
Aug 03 Javascript
详解jQuery停止动画——stop()方法的使用
Dec 14 Javascript
深入理解 JavaScript 中的 JSON
Apr 06 Javascript
jQuery Tree Multiselect使用详解
May 02 jQuery
基于angular实现三级联动的生日插件
May 12 Javascript
利用Ionic2 + angular4实现一个地区选择组件
Jul 27 Javascript
在node中使用jwt签发与验证token的方法
Apr 03 Javascript
jquery实现简易验证插件封装
Sep 13 jQuery
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
destoon文章模块调用企业会员资料的方法
2014/08/22 PHP
php设计模式之简单工厂模式详解
2014/09/04 PHP
php数据访问之增删改查操作
2016/05/09 PHP
PHP微信开发之查询微信精选文章
2016/06/23 PHP
Laravel中正确地返回HTTP状态码方法示例
2019/09/10 PHP
Display SQL Server Version Information
2007/06/21 Javascript
jquery 表单进行客户端验证demo
2009/08/24 Javascript
jQuery最佳实践完整篇
2011/08/20 Javascript
jQuery中的$.ajax()方法应用
2014/05/06 Javascript
js获取form的方法
2015/05/06 Javascript
使用RequireJS优化JavaScript引用代码的方法
2015/07/01 Javascript
基于BootStrap Metronic开发框架经验小结【七】数据的导入、导出及附件的查看处理
2016/05/12 Javascript
实例解析jQuery中如何取消后续执行内容
2016/12/01 Javascript
利用yarn代替npm管理前端项目模块依赖的方法详解
2017/09/04 Javascript
完美解决axios在ie下的兼容性问题
2018/03/05 Javascript
jQuery实现获取多选框的值示例
2020/02/07 jQuery
js实现聊天对话框
2020/02/08 Javascript
vue2路由基本用法实例分析
2020/03/06 Javascript
通过实例解析json与jsonp原理及使用方法
2020/09/27 Javascript
python调用Moxa PCOMM Lite通过串口Ymodem协议实现发送文件
2014/08/15 Python
简单介绍Python的Django框架的dj-scaffold项目
2015/05/30 Python
Python正则获取、过滤或者替换HTML标签的方法
2016/01/28 Python
Python的爬虫程序编写框架Scrapy入门学习教程
2016/07/02 Python
django中的图片验证码功能
2019/09/18 Python
Python全局锁中如何合理运用多线程(多进程)
2019/11/06 Python
Python3实现将一维数组按标准长度分隔为二维数组
2019/11/29 Python
Python matplotlib 绘制双Y轴曲线图的示例代码
2020/06/12 Python
纯CSS实现菜单、导航栏的3D翻转动画效果
2014/04/23 HTML / CSS
印度尼西亚最好的小工具在线商店:Erafone.com
2019/03/26 全球购物
参观考察邀请函范文
2014/01/29 职场文书
高级销售求职信
2014/02/21 职场文书
股权转让协议书
2014/04/12 职场文书
高二学生评语大全
2014/04/25 职场文书
2014年招商工作总结
2014/11/22 职场文书
行政主管岗位职责
2015/02/03 职场文书
资料员岗位职责范本
2015/04/13 职场文书