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和css(外部文件)
Apr 17 Javascript
通过url查找a元素并点击
Apr 09 Javascript
如何书写高质量jQuery代码(使用jquery性能问题)
Jun 30 Javascript
jQuery操作JSON的CRUD用法实例
Feb 25 Javascript
第一次接触神奇的Bootstrap表单
Jul 27 Javascript
AngularJS中的表单简单入门
Jul 28 Javascript
javascript轮播图算法
Oct 21 Javascript
JavaScript 详解预编译原理
Jan 22 Javascript
angular实现图片懒加载实例代码
Jun 08 Javascript
浅谈Vue路由快照实现思路及其问题
Jun 07 Javascript
利用不到200行代码写一款属于你自己的js类库
Jul 08 Javascript
Vue中computed和watch有哪些区别
Dec 19 Vue.js
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
windows xp下安装pear
2006/12/02 PHP
PHP支持多种格式图片上传(支持jpg、png、gif)
2011/11/03 PHP
PHP autoload与spl_autoload自动加载机制的深入理解
2013/06/05 PHP
PHP内核探索:变量概述
2014/01/30 PHP
php防止网站被攻击的应急代码
2015/10/21 PHP
Yii2处理密码加密及验证的方法
2019/05/12 PHP
参考:关于Javascript中实现暂停的几篇文章
2007/03/04 Javascript
屏蔽Flash右键信息的js代码
2010/01/17 Javascript
jquery 查找iframe父级页面元素的实现代码
2011/08/28 Javascript
javascript:void(0)的作用示例介绍
2013/10/28 Javascript
用js一次改变多个input的readonly属性值的方法
2014/06/11 Javascript
用js判断是否为360浏览器的实现代码
2015/01/15 Javascript
JS自定义函数对web前端上传的文件进行类型大小判断
2016/10/19 Javascript
js 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示实例
2016/12/06 Javascript
JQuery.validationEngine表单验证插件(推荐)
2016/12/10 Javascript
Sequelize中用group by进行分组聚合查询
2016/12/12 Javascript
React事件处理的机制及原理
2018/12/03 Javascript
vue柱状进度条图像的完美实现方案
2019/08/26 Javascript
vue中 this.$set的用法详解
2019/09/06 Javascript
JavaScript实现图片伪异步上传过程解析
2020/04/10 Javascript
解决vue 退出动画无效的问题
2020/08/09 Javascript
python中的yield使用方法
2014/02/11 Python
Python中文件遍历的两种方法
2014/06/16 Python
python之Socket网络编程详解
2016/09/29 Python
Python集合操作方法详解
2020/02/09 Python
pytorch:model.train和model.eval用法及区别详解
2020/02/20 Python
利用python+ffmpeg合并B站视频及格式转换的实例代码
2020/11/24 Python
通过python-pptx模块操作ppt文件的方法
2020/12/26 Python
你们项目是如何进行变更控制的
2015/08/26 面试题
迎国庆演讲稿
2014/09/05 职场文书
麦田里的守望者读书笔记
2015/06/30 职场文书
学雷锋感言
2015/08/03 职场文书
社区服务活动感想
2015/08/11 职场文书
初三化学教学反思
2016/02/22 职场文书
Netty客户端接入流程NioSocketChannel创建解析
2022/03/25 Java/Android
Python OpenCV超详细讲解读取图像视频和网络摄像头
2022/04/02 Python