angular和BootStrap3实现购物车功能


Posted in Javascript onJanuary 25, 2017

一、页面搭建

1、html结构

采用BootStrap3来快速创建一个购物车表单样式。
主要功能:
A:列表数据所示
B:增加删除端口
C:清空购物车
D:商品数量的增减
E:动态计算商品价格以及总价

<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
 <meta charset="UTF-8">
 <title>购物车</title>
 <link rel="stylesheet" href="../vendor/bootstrap/css/bootstrap.css">
 <script src="../vendor/angular.js"></script>
 <script src="car-controller.js"></script>
</head>
<body>
 <div class="table-responsive container" ng-controller="CarCtrl">

  <table class="table " ng-show="data.length">
   <thead>
   <tr><th>产品编号</th><th>产品名字</th><th>购买数量</th><th>产品单价</th><th>产品总价</th><th>操作</th></tr>
   </thead>
   <tr ng-repeat="value in data">
    <td>{{value.id}}</td>
    <td>{{value.name}}</td>
    <td>
     <button class="btn btn-primary" ng-click="reduce(value.id)" >-</button>
     <input type="number" name="num" ng-model="value.quantity" id="num">
     <button class="btn btn-primary" ng-click="add(value.id)">+</button>
    </td>
    <td>{{value.price}}</td>
    <td>{{value.price*value.quantity}}</td>
    <td>
     <button class="btn btn-danger" ng-click="removeItem(value.id)">移除</button>
    </td>
   </tr>
   <tfoot>
   <tr>
    <td></td>
    <td>总购买数量 </td>
    <td>{{totalQuantity()}}</td>
    <td>总购买价</td>
    <td>{{totalPrice()}}</td>
    <td>
     <button class="btn btn-danger" ng-click="data=null">清空购物车</button>
    </td>
   </tr>
   </tfoot>
  </table>
  <p ng-show="!data.length">您的购物车为空</p>
 </div>
</body>
</html>

2、js逻辑部分

1 注册应用app
2 定义controller以即数据
3 在html中绑定应用以及controller,实现数据渲染

var app=angular.module("app",[]);
 var carController=function($scope){
  $scope.data=[
   {
    id:1,
    name:'HuaWei',
    quantity:'2',
    price:4300
   },
   {
    id:2,
    name:'iphone7',
    quantity:'3',
    price:6300
   },
   {
    id:3,
    name:'XiaoMi',
    quantity:'3',
    price:2800
   },
   {
    id:4,
    name:'Oppo',
    quantity:'3',
    price:2100
   },
   {
    id:5,
    name:'Vivo',
    quantity:'3',
    price:2100
   }
  ]
 }

注意:

1、在html中通过ng-app注册应用,ng-controller来绑定控制器作用域,ng-repeat遍历商品数据data
2、在js中,angular提供了angular.forEach(obj,fn(item){})方法来遍历angular的数据,并可以在fn中对数据做进一步处理。此处计算总价便通过此方法

二、业务逻辑

1、总价计算操作

/*
   * 计算总价
   * @method: angular.forEach()
   * @param: 1. $scope.obj:要遍历的scope上的数据
   *   2. function(item){} 回调,在函数内部处理遍历的数据
   * */
  $scope.totalPrice=function(){
   var total=0;
   angular.forEach($scope.data,function(item){
    total+=item.quantity*item.price;
   })
   return total
  }
   /*计算总数量*/
  $scope.totalQuantity=function(){
   var total=0;
   angular.forEach($scope.data,function(item){
    total+=item.quantity;
   })
   return total
  }

说明:

1)、使用angular提供的forEach方法遍历当前数据,从而计算出所有数据的总价以及总数量

2、删除条目

/*移除某项
  * @param:传入当前项的id作为参数,以确定移除哪一项
  * */
  $scope.removeItem=function(id){
   var index=findIndex();
   $scope.data.splice(index,1);
  }

说明:

1)、为代码利用,所以抽取出来findIndex()方法用于确定当前操作的项,代码如下:

/*查找当前操作的元素的位置*/
  function findIndex(id){
   var index=-1;
   angular.forEach($scope.data,function(value,key,obj){
    if(value.id===id){
     index=key;
     return index;
    }
   })
   return index;
  }

3.清空操作

在页面中,直接利用表达式,但data=null完成数据的清空操作

<tr>
 <td></td>
 <td>总购买数量 </td>
 <td>{{totalQuantity()}}</td>
 <td>总购买价</td>
 <td>{{totalPrice()}}</td>
 <td>
  <button class="btn btn-danger" ng-click="data=null">清空购物车</button>
 </td>
</tr>

4. 增加和删除商品数量

/*增加商品数量*/
  $scope.add=function(id){
   var index=findIndex($scope,id),
    item=$scope.data[index];
   item.quantity++;
  }
  /*减少商品数量
  * @description:
  * 减少当前项的数量,当仅剩一件时弹出对话框确认是否清空。是则调用removeItem方法清除当前项
  * */
  $scope.reduce=function(id){
   var index=findIndex($scope,id),
    item=$scope.data[index];
   if(item.quantity>1){ //判断当前项是否还能再减
    item.quantity--;
   }else{
    var makesure=confirm('确定要清空当前项吗??');
    if(makesure){
     $scope.removeItem(id)
    }
   }
  }

总结:
此demo主要利用了angular的数据双向绑定特性,从而大大的简化了操作。
关键点:

1)、angular.forEach(obj,fn(value,key,obj)) 迭代器
2)、ng-click指令绑定点击事件。使用ng-click会自动触发angular的脏检查机制从而实时的更新视图
3)、ng-repeat指令遍历数据,渲染页面
4)、ng-show指令:通过其值来判断是否显示(原理是给元素加nghide类名)

angular和BootStrap3实现购物车功能

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

Javascript 相关文章推荐
解密效果
Jun 23 Javascript
jquery中动态效果小结
Dec 16 Javascript
javascript 学习笔记(六)浏览器类型及版本信息检测代码
Apr 08 Javascript
为jQuery添加Webkit的触摸的方法分享
Feb 02 Javascript
jQuery多项选项卡的实现思路附样式及代码
Jun 03 Javascript
推荐JavaScript实现继承的最佳方式
Nov 11 Javascript
JavaScript中toString()方法的使用详解
Jun 05 Javascript
详解vue之页面缓存问题(基于2.0)
Jan 10 Javascript
jQuery插件zTree实现删除树子节点的方法示例
Mar 08 Javascript
js中变量的连续赋值(实例讲解)
Jul 08 Javascript
vue-content-loader内容加载器的使用方法
Aug 05 Javascript
vue项目开启Gzip压缩和性能优化操作
Oct 26 Javascript
jquery 实现复选框的全选操作实例代码
Jan 24 #Javascript
谈谈JavaScript数组常用方法总结
Jan 24 #Javascript
js实现日历的简单算法
Jan 24 #Javascript
JSON键值对序列化和反序列化解析
Jan 24 #Javascript
js自制图片放大镜功能
Jan 24 #Javascript
JS中绑定事件顺序(事件冒泡与事件捕获区别)
Jan 24 #Javascript
input获取焦点时底部菜单被顶上来问题的解决办法
Jan 24 #Javascript
You might like
轻松入门: 煮好咖啡的七个诀窍
2021/03/03 冲泡冲煮
PHP开发文件系统实例讲解
2006/10/09 PHP
windows下PHP_intl.dll正确配置方法(apache2.2+php5.3.5)
2014/01/14 PHP
国外Lightbox v2.03.3 最新版 下载
2007/10/17 Javascript
JQuery EasyUI 对话框的使用方法
2010/10/24 Javascript
基于jQuery的输入框无值自动显示指定数据的实现代码
2011/01/24 Javascript
提取字符串中年月日的函数代码
2013/11/05 Javascript
AngularJS基础学习笔记之表达式
2015/05/10 Javascript
详解JavaScript中this关键字的用法
2016/05/26 Javascript
微信小程序 页面跳转和数据传递实例详解
2017/01/19 Javascript
Vuex之理解state的用法实例
2017/04/19 Javascript
bootstrap datetimepicker控件位置异常的解决方法
2017/11/23 Javascript
基于vue 添加axios组件,解决post传参数为null的问题
2018/03/05 Javascript
angularjs 动态从后台获取下拉框的值方法
2018/08/13 Javascript
JavaScript实现随机点名程序
2020/03/25 Javascript
vue实现把接口单独存放在一个文件方式
2020/08/13 Javascript
浅析微信小程序自定义日历组件及flex布局最后一行对齐问题
2020/10/29 Javascript
[01:23:45]DOTA2-DPC中国联赛 正赛 CDEC vs Dragon BO3 第一场 1月22日
2021/03/11 DOTA
初学python的操作难点总结(新手必看篇)
2017/08/03 Python
python 按照固定长度分割字符串的方法小结
2018/04/30 Python
python 获取当天每个准点时间戳的实例
2018/05/22 Python
python numpy和list查询其中某个数的个数及定位方法
2018/06/27 Python
对python numpy.array插入一行或一列的方法详解
2019/01/29 Python
Python 中Django验证码功能的实现代码
2019/06/20 Python
PyQt5重写QComboBox的鼠标点击事件方法
2019/06/25 Python
对Python的交互模式和直接运行.py文件的区别详解
2019/06/29 Python
基于python3 的百度图片下载器的实现代码
2019/11/05 Python
python函数定义和调用过程详解
2020/02/09 Python
python实现FTP循环上传文件
2020/03/20 Python
python中urllib.request和requests的使用及区别详解
2020/05/05 Python
Python如何给你的程序做性能测试
2020/07/29 Python
小学生常见病防治方案
2014/06/06 职场文书
开国大典观后感
2015/06/04 职场文书
小英雄雨来观后感
2015/06/09 职场文书
2015年医院保卫科工作总结
2015/07/23 职场文书
python flappy bird小游戏分步实现流程
2022/02/15 Python