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

页面效果如图：

若使用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 聚合和继承

    聚合模块 我们希望一次构建两个或更多项目,而不是到每个模块的目录下分别执行mvn命令,Maven 聚合这一特性就是为该需求服务的, 为了使用聚合,我们必须创建一个聚合模块,通过该模块与其他项目聚合,并 ...

  2. 如何使用一次for循环得到数组中第二大的数和第三大的数

    装载声明:http://blog.csdn.net/lxsmk9059/article/details/77920206?locationNum=1&fps=1 ,,,,,,,,}; ]; ] ...

  3. Angular开发实践（六）：服务端渲染

    Angular Universal Angular在服务端渲染方面提供一套前后端同构解决方案,它就是 Angular Universal(统一平台),一项在服务端运行 Angular 应用的技术. 标 ...

  4. [css 揭秘]：CSS揭秘 技巧（二）：多重边框

    我的github地址:https://github.com/FannieGirl/ifannie/ 源码都在这上面哦! 喜欢的给我一个星吧 多重边框 问题:我们通常希望在css代码层面以更灵活的方式来 ...

  5. 爬虫（BeautifulSoup--select--class的选择）

    <div class="item name" title="中央公园"> <a href="/Attraction_Review-g ...

  6. 集合源码（一）之hashMap、ArrayList

    HashMap 一.HashMap基本概念: HashMap是基于哈希表的Map接口的实现.此实现提供所有可选的映射操作,并允许使用null值和null键.此类不保证映射的顺序,特别是它不保证该顺序恒 ...

  7. 敏捷冲刺（Beta版本）

    评分基准: 按时交 - 有分(计划安排-10分,敏捷冲刺-70分),检查的项目包括后文的三个个方面 冲刺计划安排(单独1篇博客,基本分5分,根据完成质量加分,原则上不超过满分10分) 七天的敏捷冲刺( ...

  8. c语言第五次作业--函数

    一.PTA实验作业 题目1.使用函数输出一个整数的逆序数 1.本题PTA提交列表 2.设计思路 1.int mod,rever:分别表示余数和返回的数 2.while(number%10 || num ...

  9. AWS中，如果使用了ELB，出现outofservice

    平台:亚马逊AWS EC2 出现状况: 我创建了弹性平衡负载,也注册了实例,但是实例的状态一直是outofservice.为什么? 为什么会出现这个问题呢? 1:实例有问题: 2:负载平衡器创建的有问 ...

  10. GPUImage滤镜效果翻译

    #import"GPUImageBrightnessFilter.h"//亮度 #import"GPUImageExposureFilter.h"//曝光 #i ...