利用Angularjs和bootstrap实现购物车功能


Posted in Javascript onAugust 31, 2016

先来看看效果图:

利用Angularjs和bootstrap实现购物车功能
购物车

一、代码

如果看了这个效果有兴趣想知道怎么做出来的话,那就继续往下看吧。话不多少,直接上代码。

html代码:

<!DOCTYPE html>
<html lang="en" ng-app="cart">
<head>
 <meta charset="UTF-8">
 <title>购物车</title>
 <link rel="stylesheet" href="../scripts/angular-1.4.0-rc.2/docs/components/bootstrap-3.1.1/css/bootstrap.min.css">
 <link rel="stylesheet" href="main.css">
</head>
<body ng-controller="cartCtr">
<table class="table table-hover" ng-show="items.length">
 <caption>AngularJS实现购物车</caption>
 <tr>
 <th>序号</th>
 <th>商品信息</th>
 <th>单价(元)</th>
 <th>数量</th>
 <th>金额(元)</th>
 <th>操作</th>
 </tr>
 <tr ng-repeat=" item in items">
 <td>{{$index + 1}}</td>
 <td><a href="{{item.linkUrl}}" target="_blank" title="此链接将跳转到淘宝相关页面...">{{item.title}}</a></td>
 <td class="bold">{{item.price|number:2}}</td>
 <td>
  <button type="button" class="btn btn-default btn-xs" ng-click="reduce(item.id)" ng-disabled="item.quantity<=1">-</button>
  <input type="text" size="5" ng-model="item.quantity" ng-keydown="quantityKeydown()" ng-keyup="quantityKeyup()">
  <button type="button" class="btn btn-default btn-xs" ng-click="add(item.id)">+</button>
 </td>
 <td class="bold mark">{{item.price*item.quantity|number:2}}</td>
 <td>
  <button type="button" class="btn btn-default btn-xs" ng-click="delete(item.id)">删除</button>
 </td>
 </tr>
</table>
<div class="empty" ng-show="!items.length">购物车空空,快去寻找宝贝</div>
<div class="total">
 已选商品:<span>{{getQuantites()}} </span>
 合计:
 <span class=" mark" ng-show="getTotalAmount()<15000">{{getTotalAmount()|number:2}}</span>
 <span class=" mark" ng-show="getTotalAmount()>=15000">
 {{getTotalAmount()*discount|number:2}}<span class="btn btn-xs">(9折)</span>
 <span class="discount">({{getTotalAmount()|number:2}})</span>
 </span>
 <button type="button" class="btn btn-primary btn-sm" ng-click="alertSubmit()">结 算</button>
</div>
<script src="../scripts/angular-1.4.0-rc.2/angular.js"></script><script src="app.js"></script>
</body>
</html>

js代码:

/ Created by wqq on 2016/5/25. /
var cartModule = angular.module('cart', []);
cartModule.controller('cartCtr', ['$scope', function ($scope) {
 $scope.discount = 0.9;
 $scope.items = [{id: 10001,title: "Web全栈工程师的自我修养 余果", price: 40.80,quantity: 2,linkUrl: "https://detail.tmall.com/item.htm?spm=a1z0d.6639537.1997196601.4.cwywJs&id=532166746631"},
     {id: 10002,title: "MacBook Pro Retina 15英寸", price: 16088.00,quantity: 1,linkUrl: "https://detail.tmall.com/item.htm?spm=a1z0d.6639537.1997196601.26.cwywJs&id=45771116847"},
     {id: 10003,title: "Surface Book I5 128G 独显",price: 11088.00, quantity: 1,linkUrl: "https://detail.tmall.com/item.htm?spm=a1z0d.6639537.1997196601.15.cwywJs&id=525614504276"},
     {id: 10004, title: "Lenovo Yoga3Pro I5 4G",price: 7299.00, quantity: 1,linkUrl: "https://detail.tmall.com/item.htm?spm=a1z0d.6639537.1997196601.37.cwywJs&id=41541519814"} ];
 $scope.add = function (id) {
  angular.forEach($scope.items, function (item, index, array) {
        if (item.id === id) {item.quantity++;} })
 };
 $scope.reduce = function (id) {
  angular.forEach($scope.items, function (item, index, array) {
        if (item.id === id) {item.quantity--; } })
 };
 //输入框添加keydown事件,避免输入非正整数
 $scope.quantityKeydown = function (event) {
  event = event || window.event;
  var target=event.target||event.srcElement;
  var keycode = event.keyCode;
  if ((37 <= keycode && keycode <= 40)||(48 <= keycode && keycode <= 57) || (96 <= keycode && keycode <= 105) || keycode == 8) {
    //方向键↑→ ↓←、数字键、backspace
  }
  else {
   console.log(keycode);
   event.preventDefault();
   return false;
  }
 };
//keyup事件,当输入数字为0时,重新刷新文本框内容
$scope.quantityKeyup = function (event) {
  event = event || window.event;
  var target=event.target||event.srcElement;
  var keycode = event.keyCode;
  if (48 === keycode || 96 === keycode ) {
   target.value=parseInt(target.value);
 }};
 //删除商品
 $scope.delete = function (id) {
  $scope.items.forEach(function (item, index) {
  if (item.id == id) {
   if (confirm("确定要从购物车中删除此商品?")) {
    $scope.items.splice(index, 1);
    return;
   }
  }
 })
 };
 //计算已选商品数量
 $scope.getQuantites = function () {
 var quantities = 0;
 angular.forEach($scope.items, function (item, index, array) {
  if (item.quantity) {
   quantities += parseInt(item.quantity);
  }
 });
 return quantities;
 };
 //计算合计总金额
 $scope.getTotalAmount = function () {
 var totalAmount = 0;
 angular.forEach($scope.items, function (item, index, array) {
  totalAmount += item.quantity * item.price;  });
 return totalAmount;
 };
 $scope.alertSubmit = function () {alert("Angular实现购物车"); }
}]);

二、分析

请忽略bootstrap的样式,我们只关注Angular,代码很简单,我们来简单的分析一下:

1. 准备

首先我们我们定义了一个cart模块、cartCtr控制器,并将它们引入到了html代码中,同时我们还在js中定义了一个数组items用于模拟购物车内的东西。

2. ng-repeat迭代器

为了将items里的数据动态的遍历加载出来,我们使用Angular里的内置指令ng-repeat,它可以非常方便的遍历数组,生成DOM元素,在这里循环生成了4个<tr>标签:

<tr ng-repeat=" item in items">

item就是items数组里面的某一个对象,是不是感觉这就是js中的for/in循环~~如果你是一名.net开发人员,用过asp.net mvc的Razor就对这种其他语言无缝操作DOM元素很熟悉了,至于java、PHP是否有没有类似的语法我就不清楚了,我是一名苦逼的.net开发。

利用Angularjs和bootstrap实现购物车功能
ng-repeat迭代器

我们可以看到第一个td中用到了$index,这是ng-repeat内的,并不是我们定义的,它的值是当前itemitems中的索引,从0开始,所以我们用$index+1作为序号,其他的还有(类似item.linkUrl)数据绑定。

我们在单价和金额两列用到了{{ xxx|number:2}},这是Angular中的一种过滤器,作用是将前面的值xxx保留两位小数,金额嘛,我们当然要精确一些。刚才说了这是一种过滤器,那就还有其他的,比如currency,可以在xxx前面添加一个$符号表示美元,可以自行百度其他过滤器用法。

3. 添加事件

当前界面上分别有数量+、-按钮、删除按钮,这几个事件都比较简单,利用ng-click给元素添加点击事件。通过传递某个商品的id,找到这个商品,对这个商品进行加、减、删除操作,只不过在“-”按钮上有添加了一个ng-disabled标签,根据名字我们就可以很容易想到html的disabled属性,它的作用就是当ng-disabled的值为true时DOM元素禁用,同理,下面用到的ng-show也是一样的,true时显示,false时隐藏。如果是数字的话会自动转化为boolean值,0是false,非0是true,注意负数也是true!。这里我让当数量为1时就不能减少了,因为再少就可以直接删除了呀~

然后在input元素添加ng-keydown事件,使其只能输入方向键↑→ ↓←、数字键、backspace。然后我试了下确实到达了目的,但是却可以输入类似“00021”这种数字,显然这并不能令人满意。我看了看淘宝的购物车,发现当在前面输入0时,这个文本框的内容会自动刷新,去掉前面的0,于是我又添加了ng-keyup事件:

$scope.quantityKeyup = function (event) {
  event = event || window.event; //兼容IE8以下,target也是
  var target=event.target||event.srcElement;
  var keycode = event.keyCode;
  if (48 === keycode || 96 === keycode ) {
   target.value=parseInt(target.value);
 }};

这时当我输入0时,文本框值就会自动刷新,为什么不添加到keydown里面而要另外再加一个事件呢?那是因为触发keydown事件时target.value的值还是原来的值,还没有包含本次输入的按键,而在keydown之后值就是新值了,这时候我们接着让触发keyup事件就可以达到目的了,可以对照看下淘宝购物车的效果,我觉得我的体验比它的更好,因为它只要不是在最后输入数字文本框总是会失去焦点。。。

4. 统计

统计数量就是直接绑定方法,遍历数组返回值。

合计金额这块,我做了个满15000打9折的设计。利用ng-show隐藏显示带打折信息的合计金额。

三、总结

js中用到了几处forEach遍历数组,ECMAScript5中原生的方法是array.forEach(function(item,index,array){});

angular中也封装了,angular.forEach(array,function(item,index,array){});

代码中我两种方法都用到了,也不知道那种性能好。。

至此,购物车就已经完成了,利用Angular的双向绑定,可以快速的实现数量、金额的联动改变。希望这篇文章的内容对大家学习和使用Angular能有所帮助,如果有疑问可以留言交流。

Javascript 相关文章推荐
百度 popup.js 完美修正版非常的不错 脚本之家推荐
Apr 17 Javascript
js每隔5分钟执行一次ajax请求的实现方法
Nov 27 Javascript
详解JavaScript的while循环的使用
Jun 03 Javascript
Angularjs中UI Router全攻略
Jan 29 Javascript
AngularJS身份验证的方法
Feb 17 Javascript
原生JS实现图片翻书效果
Feb 16 Javascript
Vue多系统切换实现方案
Jun 05 Javascript
vue 中的keep-alive实例代码
Jul 20 Javascript
vue 项目 iOS WKWebView 加载
Apr 17 Javascript
在VUE中实现文件下载并判断状态的方法
Nov 08 Javascript
PHP 502bad gateway原因及解决方案
Nov 13 Javascript
canvas实现贪食蛇的实践
Feb 15 Javascript
JavaScript String(字符串)对象的简单实例(推荐)
Aug 31 #Javascript
基于JavaScript实现鼠标向下滑动加载div的代码
Aug 31 #Javascript
Node.js配合node-http-proxy解决本地开发ajax跨域问题
Aug 31 #Javascript
jQuery禁用快捷键例如禁用F5刷新 禁用右键菜单等的简单实现
Aug 31 #Javascript
基于JavaScript实现点击页面任何位置返回
Aug 31 #Javascript
jquery datatable服务端分页
Aug 31 #Javascript
关于javascript原型的修改与重写(覆盖)差别详解
Aug 31 #Javascript
You might like
PHP4实际应用经验篇(7)
2006/10/09 PHP
PHP开发框架laravel安装与配置教程
2015/03/13 PHP
php校验表单检测字段是否为空的方法
2015/03/20 PHP
windows平台中配置nginx+php环境
2015/12/06 PHP
PHP7 标准库修改
2021/03/09 PHP
Javascript 写的简单进度条控件
2008/01/22 Javascript
javascript Discuz代码中的msn聊天小功能
2008/05/25 Javascript
javascript 一段左右两边随屏滚动的代码
2009/06/18 Javascript
mailto的使用技巧分享
2012/12/21 Javascript
原生javascript图片自动或手动切换示例附演示源码
2013/09/04 Javascript
模拟jQuery中的ready方法及实现按需加载css,js实例代码
2013/09/27 Javascript
JQuery右键菜单插件ContextMenu使用指南
2014/12/19 Javascript
jQuery中toggleClass()方法用法实例
2015/01/05 Javascript
JavaScript中Boolean对象的属性解析
2015/10/21 Javascript
跟我学习javascript的this关键字
2020/05/28 Javascript
angularJS 发起$http.post和$http.get请求的实现方法
2017/05/18 Javascript
微信小程序 密码输入(源码下载)
2017/06/27 Javascript
JavaScript this使用方法图解
2020/02/04 Javascript
WEB前端性能优化的7大手段详解
2020/02/04 Javascript
[04:03]DOTA2英雄梦之声_第02期_风暴之灵
2014/06/30 DOTA
[00:43]魔廷新尊——痛苦女王至宝捆绑包
2020/06/12 DOTA
Python语言实现机器学习的K-近邻算法
2015/06/11 Python
在Mac OS上搭建Python的开发环境
2015/12/24 Python
[原创]使用豆瓣提供的国内pypi源
2017/07/02 Python
Python_LDA实现方法详解
2017/10/25 Python
linux环境中没有网络怎么下载python
2019/07/07 Python
tensorflow实现训练变量checkpoint的保存与读取
2020/02/10 Python
python多维数组分位数的求取方式
2020/03/03 Python
pyinstaller打包单文件时--uac-admin选项不起作用怎么办
2020/04/15 Python
硕士研究生就业推荐信
2014/05/18 职场文书
妇联主席先进事迹
2014/05/18 职场文书
《周恩来的四个昼夜》观后思想汇报范文两篇
2014/09/10 职场文书
党员评议表自我评价范文
2014/10/20 职场文书
2015年结对帮扶工作总结
2015/05/04 职场文书
房屋买卖定金协议书
2016/03/21 职场文书
只需要100行Python代码就可以实现的贪吃蛇小游戏
2021/05/27 Python