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 相关文章推荐
Javascript-Mozilla和IE中的一个函数直接量的问题
Jan 09 Javascript
javascript中的window.location.search方法简介
Sep 02 Javascript
从零学jquery之如何使用回调函数
May 16 Javascript
分享一则javascript 调试技巧
Jan 02 Javascript
Javascript中的数据类型之旅
Oct 18 Javascript
js时间戳转为日期格式的方法
Dec 28 Javascript
Angularjs使用directive自定义指令实现attribute继承的方法详解
Aug 05 Javascript
js鼠标移动时禁止选中文字
Feb 19 Javascript
jquery+css实现侧边导航栏效果
Jun 12 jQuery
JS实现websocket长轮询实时消息提示的效果
Oct 10 Javascript
JavaScript中this函数使用实例解析
Feb 21 Javascript
原生JS实现烟花效果
Mar 10 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
PHP5中新增stdClass 内部保留类
2011/06/13 PHP
php获取服务器端mac和客户端mac的地址支持WIN/LINUX
2014/05/15 PHP
百度实时推送api接口应用示例
2014/10/21 PHP
帝国CMS留言板回复后发送EMAIL通知客户
2015/07/06 PHP
PHP实现微信退款功能
2018/10/02 PHP
js遍历td tr等html元素
2012/12/13 Javascript
jquery打开直接跳到网页最下面、最低端实现代码
2013/04/22 Javascript
JS+flash实现chrome和ie浏览器下同时可以复制粘贴
2013/09/22 Javascript
理解javascript函数式编程中的闭包(closure)
2016/03/08 Javascript
js基于cookie方式记住返回页面用法示例
2016/05/27 Javascript
Jquery基础之事件操作详解
2016/06/14 Javascript
jQuery插入节点和移动节点用法示例(insertAfter、insertBefore方法)
2016/09/08 Javascript
javascript匀速动画和缓冲动画详解
2016/10/20 Javascript
jquery拖动改变div大小
2017/07/04 jQuery
vue-router路由懒加载和权限控制详解
2017/12/13 Javascript
JS计算两个时间相差分钟数的方法示例
2018/01/10 Javascript
Vue中的情侣属性$dispatch和$broadcast详解
2019/03/07 Javascript
在Vue项目中用fullcalendar制作日程表的示例代码
2019/08/04 Javascript
详解vuex数据传输的两种方式及this.$store undefined的解决办法
2019/08/26 Javascript
JavaScript实现五子棋小游戏
2020/10/26 Javascript
JavaScript 实现继承的几种方式
2021/02/19 Javascript
[59:15]EG vs LGD 2018国际邀请赛淘汰赛BO3 第一场 8.26
2018/08/29 DOTA
从零学Python之入门(二)基本数据类型
2014/05/25 Python
浅谈python在提示符下使用open打开文件失败的原因及解决方法
2018/11/30 Python
详解用python写一个抽奖程序
2019/05/10 Python
python文字和unicode/ascll相互转换函数及简单加密解密实现代码
2019/08/12 Python
python pyqtgraph 保存图片到本地的实例
2020/03/14 Python
python 如何把docker-compose.yaml导入到数据库相关条目里
2021/01/15 Python
HTML5 visibilityState属性详细介绍和使用实例
2014/05/03 HTML / CSS
canvas实现手机的手势解锁的步骤详细
2020/03/16 HTML / CSS
介绍下java.util.Arrays类
2012/10/16 面试题
爱之链教学反思
2014/04/30 职场文书
企业领导班子四风对照检查材料
2014/09/27 职场文书
2014幼儿园中班工作总结
2014/11/10 职场文书
工商局个人工作总结
2015/03/03 职场文书
写作技巧:如何撰写商业计划书
2019/08/08 职场文书