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

页面效果如图：

若使用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. Vue之九数据劫持实现MVVM的数据双向绑定

    vue是通过数据劫持的方式来做数据绑定的,其中最核心的方法便是通过Object.defineProperty()来实现对属性的劫持,达到监听数据变动的目的. 如果不熟悉defineProperty,猛 ...

  2. WebGL 3D 工业隧道监控实战

    前言 监控隧道内的车道堵塞情况.隧道内的车祸现场,在隧道中显示当前车祸位置并在隧道口给与提示等等功能都是非常有必要的.这个隧道 Demo 的主要内容包括:照明.风机.车道指示灯.交通信号灯.情报板.消 ...

  3. WebPack介绍

    一.Webpack 是什么 Webpack 是德国开发者 Tobias Koppers 开发的模块加载器,Instagram 工程师认为这个方案很棒, 似乎还把作者招过去了.在 Webpack 当中, ...

  4. 【pyHook】 监测键盘鼠标事件等

    [pyHook] pyHook是一个用来进行键盘.鼠标等层面事件监控的库.这个库的正常工作需要pythoncom等操作系统的API的支持.首先来说说如何安装. 直接pip install pyHook ...

  5. centos安装包选择--liveCD、liveDVD、bin-DVD、netinstall和minimal

    在Centos官方选择下载centos的时候有好几个文件可供下载,包括liveCD.liveDVD和bin-DVD等等.这些文件都有什么区别,我们应该选择哪个文件下载呢? liveDVD版本:它就是一 ...

  6. Java基础学习笔记十四 常用API之基本类型包装类

    基本类型包装类 Java中有8种基本的数据类型,可是这些数据是基本数据,想对其进行复杂操作,变的很难.怎么办呢?在实际程序使用中,程序界面上用户输入的数据都是以字符串类型进行存储的.而程序开发中,我们 ...

  7. hibernate框架学习笔记3：API详解

    Configuration对象: package api; import org.hibernate.SessionFactory; import org.hibernate.cfg.Configur ...

  8. Maven+SSM框架搭建【spring+springmvc+mybatis】

    本案例用到:ssm[spring+springmvc+mybatis]框架 数据库:mysql (推荐使用mysql 或者 sqlserver  .oracle太大,一般大型项目才会用到) 开发工具: ...

  9. 团队作业7——第二次项目冲刺（Beta版本12.10）

    项目每个成员的进展.存在问题.接下来两天的安排. 已完成的内容:头像功能原型设计.头像裁剪功能.头像上传功能.测试 计划完成的内容:头像功能测试.bug修复 每个人的工作 (有work item 的I ...

  10. 一个C&C++程序的生命历程

    翻了好多博客,内容星星点点,没找到我想要的,现在吸取大神精华,加上本人拙见,总结如下: 一个C或C++程序从你开始编写,到结束,整个过程,都做了些什么,请看下文: 先看大体的过程:看图: 我在这里主要 ...