本文是一个简单的购物车练习，功能包括增加、减少某商品的数量，从而影响该商品的购买总价以及所有商品的购买总价；从购物车内移除一项商品；清空购物车。

页面效果如图：

若使用js或jQuery来实现这个页面，会需要绑定很多事件，如减少数量按钮事件，增加数量按钮事件，移除某项商品事件，清空购物车事件，而这些事件之中很多代码很重复，比如计算某项商品的总购买价，计算所有商品的购买总价，不胜其烦，现在有了AngularJS，则简单许多，因为数据模型双向绑定等原因。

上图页面的代码：

html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>angular购物车练习</title>
  6. <link rel="stylesheet" href="../../vendor/bootstrap3/css/bootstrap.css">
  7. <script src="../../vendor/angular/angular.min.js"></script>
  8. <script src="app/index2.js"></script>
  9. </head>
  10. <body ng-app="myApp" ng-controller="myCtrl">
  11. <div class="container">
  12. <table class="table" ng-show="cartList.length > 0">
  13. <thead>
  14. <tr>
  15. <th>产品编号</th>
  16. <th>产品名称</th>
  17. <th>购买数量</th>
  18. <th>产品单价</th>
  19. <th>产品总价</th>
  20. <th>操作</th>
  21. </tr>
  22. </thead>
  23. <tbody>
  24. <tr ng-repeat="item in cartList">
  25. <td>{{item.id}}</td>
  26. <td>{{item.name}}</td>
  27. <td>
  28. <button ng-click="reduceOne(item.id)" class="btn btn-primary">-</button>
  29. <input type="text" ng-model="item.quantity">
  30. <button ng-click="addOne(item.id)" class="btn btn-primary">+</button>
  31. </td>
  32. <td>{{item.price}}</td>
  33. <td>{{item.quantity * item.price}}</td>
  34. <td><button ng-click="remove(item.id)" class="btn btn-danger">移除</button></td>
  35. </tr>
  36. <tr>
  37. <td>总购买价</td>
  38. <td>{{totalCost()}}</td>
  39. <td>总购买数量</td>
  40. <td>{{totalCount()}}</td>
  41. <td colspan="3"><button ng-click="cartList=[]" class="btn btn-danger">清空购物车</button></td>
  42. </tr>
  43. </tbody>
  44. </table>
  45. <h4 ng-show="cartList.length < 1">您的购物车暂无商品</h4>
  46. </div>
  47. </body>
  48. </html>

index2.js :

  1. var app=angular.module("myApp",[]);
  2. app.controller("myCtrl",function($scope){
  3. $scope.cartList=[
  4. {id:1000,name:"iphone5s",quantity:3,price:4300},
  5. {id:1001,name:"iphone5",quantity:30,price:3300},
  6. {id:1002,name:"imac",quantity:3,price:3000},
  7. {id:1003,name:"ipad",quantity:5,price:6900}
  8. ];
  9. var findIndex=function(id){
  10. var index=-1;
  11. angular.forEach($scope.cartList,function(item,key){
  12. if(item.id == id){
  13. index=key;
  14. return;
  15. }
  16. });return index;
  17. };
  18. //从cartList数组中删除一项产品
  19. $scope.remove=function(id){
  20. var index=findIndex(id);
  21. if(index != -1){
  22. $scope.cartList.splice(index,1);
  23. }
  24. };
  25. //为某个商品添加一个数量
  26. $scope.addOne=function(id){
  27. var index=findIndex(id);
  28. if(index != -1){
  29. $scope.cartList[index].quantity ++;
  30. }
  31. };
  32. //位某个商品减少一个数量
  33. $scope.reduceOne=function(id){
  34. var index=findIndex(id);
  35. if(index != -1){
  36. var item=$scope.cartList[index];
  37. if(item.quantity > 1){
  38. item.quantity --;
  39. }else{
  40. var returnKey=confirm("删除该商品？");
  41. if(returnKey){
  42. $scope.remove(item.id);
  43. }
  44. }
  45. }
  46. };
  47. //总购买价
  48. $scope.totalCost=function(){
  49. var total=0;
  50. angular.forEach($scope.cartList,function(item,key){
  51. total += item.quantity * item.price;
  52. });return total;
  53. };
  54. //总购买数量
  55. $scope.totalCount=function(){
  56. var count=0;
  57. angular.forEach($scope.cartList,function(item,key){
  58. count += item.quantity;
  59. });return count;
  60. };
  61. //监听输入框更改事件避免输入负数或字符串
  62. $scope.$watch('cartList',function(newValue,oldValue){
  63. console.log( "$scope.cartList === newValue "+ ($scope.cartList === newValue) ); //永远为ture newValue指向cartList
  64. console.log( "$scope.cartList === oldValue "+ ($scope.cartList === oldValue) ); //页面初始化后为true 一旦改动永远为false
  65. angular.forEach(newValue,function(item,key){
  66. if( isNaN(item.quantity) ){
  67. item.quantity=oldValue[key].quantity;
  68. }
  69. else if( item.quantity <= 0 ){
  70. var returnKey=confirm("删除该商品？");
  71. if(returnKey){
  72. $scope.remove(item.id);
  73. }else{
  74. item.quantity=oldValue[key].quantity;
  75. }
  76. }
  77. });
  78. },true);
  79. });

页面中的指令：

ng-app         指定一个应用程序
ng-controller  指定一个控制器
ng-show        值表达式为 true 时，显示本Dom
ng-repeat      重复本Dom
ng-click       指定一个单击事件

angularjs购物车练习的更多相关文章

  1. angularjs购物车效果

    用angularjs写了一个购物车效果中. html代码: <div png-app="myAp" ng-controller="conTroll"> ...

  2. angularJs 购物车模型

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel= ...

  3. 动态枢轴网格使用MVC, AngularJS和WEB API 2

    下载shanuAngularMVCPivotGridS.zip - 2.7 MB 介绍 在本文中,我们将详细介绍如何使用AngularJS创建一个简单的MVC Pivot HTML网格.在我之前的文章 ...

  4. AngularJS 实现简单购物车

    使用AngularJS实现一个简单的购物车,主要感受强大的双向绑定和只关注对象不关注界面特性. 先看看界面: 点击+-操作和删除: 这些全部只需要操作数据源就行,不需要关注界面. 实现过程: 一.使用 ...

  5. 购物车Demo,前端使用AngularJS,后端使用ASP.NET Web API(3)--Idetity,OWIN前后端验证

    原文:购物车Demo,前端使用AngularJS,后端使用ASP.NET Web API(3)--Idetity,OWIN前后端验证 chsakell分享了前端使用AngularJS,后端使用ASP. ...

  6. 购物车Demo,前端使用AngularJS,后端使用ASP.NET Web API(2)--前端，以及前后端Session

    原文:购物车Demo,前端使用AngularJS,后端使用ASP.NET Web API(2)--前端,以及前后端Session chsakell分享了前端使用AngularJS,后端使用ASP.NE ...

  7. 购物车Demo,前端使用AngularJS,后端使用ASP.NET Web API(1)--后端

    原文:购物车Demo,前端使用AngularJS,后端使用ASP.NET Web API(1)--后端 chsakell分享了前端使用AngularJS,后端使用ASP.NET Web API的购物车 ...

  8. angularJS商品购物车案例

    <!DOCTYPE html> <html ng-app="shopping"> <head lang="en"> < ...

  9. angularJs 使用中遇到的问题小结【二：购物车引起的问题思考】

    问题描述 :购物车引起的问题思考 业务逻辑是这样的:我商品加入购物车后,——>点击购物车图标——>进入订单列表(这里的数据只有首次会加载服务器数据,后面就不会执行控制器的方法了,这里的跳转 ...

随机推荐

  1. 笔记：Maven 项目目录结构

    Maven提倡使用一个共同的标准目录结构,使开发人员能在熟悉了一个Maven工程后,对其他的Maven工程也能清晰了解.这样做也省去了很多设置的麻烦,以下的文档介绍是Maven希望的目录结构,并且也是 ...

  2. 2.java.util.logging.Logger使用详解

    一.java.util.logging.Logger简介 java.util.logging.Logger不是什么新鲜东西了,1.4就有了,可是因为log4j的存在,这个logger一直沉默着, 其实 ...

  3. Day4----------用户、群组、权限

    一.创建用户 命令:useradd 详细信息: root:x:0:0:root:/root:/bin/bash 总共七位 tom:x:500:500: :/home/tom:/bin/bash 1.r ...

  4. 【SSH/SFTP】SSH协议和SFTP

    [SSH和SFTP] ■ 设置一个只允许访问部分目录的SFTP服务器 由于SSH和SFTP之间的紧密联系,一个SFTP服务器必然会导致开放一定的SSH服务,而SSH的风险显然比SFTP要大一些.自然, ...

  5. 【Python】排列组合itertools & 集合set

    ■itertools 利用python的itertools可以轻松地进行排列组合运算 itertools的方法基本上都返回迭代器 比如 •itertools.combinations('abcd',2 ...

  6. 源码实现 --> strcpy

    拷贝字符串到目标字符串 函数 char *strcpy(char *strDestination, const char *strSource); 复制源串strSource到目标串strDestin ...

  7. KVM之二：配置网络

    1.安装KVM a.通过yum安装虚拟化的软件包 [root@kvm ~ ::]#yum install -y kvm virt-* libvirt bridge-utils qemu-img 说明: ...

  8. phpcms v9 列表页直接下载功能代码实现

    {pc:content action="lists" catid="$catid" num="3" order="id DESC& ...

  9. 学号：201621123032 《Java程序设计》第6周学习总结

    1:本周学习总结 1.1: 面向对象学习暂告一段落,请使用思维导图,以封装.继承.多态为核心概念画一张思维导图或相关笔记,对面向对象思想进行一个总结 2:书面作业 2.1: clone方法 2.1.1 ...

  10. python3爬虫之入门和正则表达式

    前面的python3入门系列基本上也对python入了门,从这章起就开始介绍下python的爬虫教程,拿出来给大家分享:爬虫说的简单,就是去抓取网路的数据进行分析处理:这章主要入门,了解几个爬虫的小测 ...