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

页面效果如图：

若使用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. 笔记：Struts2 的 JSON 插件

    安装插件,将其复制到Web应用的WEB-INF/lib 目录下 Struts2-json-plugin-2.3.16.3.jar json-lib-2.3-jdk15.jar commons-bean ...

  2. 套接字API

    Q:套接字特点 A:管道,消息队列,信号量,共享内存这些通信机制只能允许同一计算机上运行的进程相互通信,而套接字不仅可以提供在同一计算机上的进程间通信,还可以提供不同计算机上的进程间通信. 服务器端: ...

  3. shiro权限框架（一）

    不知不觉接触shiro安全框架都快三个月了,这中间配合项目开发踩过无数的坑.现在回想总结下,也算是一种积累,一种分享.中间有不够完美的地方或者不好的地方,希望大家指出来能一起交流.在这里谢谢开涛老师的 ...

  4. 21.C++- "++"操作符重载、隐式转换之explicit关键字、类的类型转换函数

    ++操作符重载 ++操作符分为前置++和后置++,比如: ++a;  a++; ++操作符可以进行全局函数或成员函数重载 重载前置++操作符不需要参数 重载后置++操作符需要一个int类型的占位参数 ...

  5. apache tomcat 安装

    1.安装jdk (java development kit) jdk下载 http://download.oracle.com/otn-pub/java/jdk tar -zxvf jdk-8u121 ...

  6. spring整合springmvc和hibernate

    上篇文章使用maven搭建了web环境,这篇来记录下如何使用spring整合springmvc和hibernate,亦即spring+springmvc+hibernate框架整合. 第一步:首先配置 ...

  7. web服务器学习2---httpd-2.4.29虚拟目录及访问控制

    一 创建虚拟目录 环境准备: 系统:CentOS 7.4 软件:httpd-2.4.29 1.编辑主配置文件,添加命令运行子配置文件 vi /usr/local/httpd/conf/httpd.co ...

  8. 第1次作业：小菜鸟的平凡IT梦

    #1.结缘计算机的始末 ##1.1与计算机相识的几年 作为一个95后,出生在一个互联网开始兴盛的时代.我记得小学的时候,开始知道电脑这个东西,学校有了机房,开始有了所谓的电脑课.那时候计算机对于我来说 ...

  9. 掌握SQLServer锁的相关概念

    一.为什么要引入锁 当多个用户同时对数据库的并发操作时会带来以下数据不一致的问题: ◆丢失更新 A,B两个用户读同一数据并进行修改,其中一个用户的修改结果破坏了另一个修改的结果,比如订票系统 ◆脏读 ...

  10. C语言--总结报告

    1.当初你是如何做出选择计算机专业的决定的? 经过一个学期,你的看法改变了么,为什么? 你觉得计算机是你喜欢的领域吗,它是你擅长的领域吗? 为什么? 当初填报志愿我是有很明确的专业方向的,就是IT类的 ...