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

页面效果如图：

若使用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. ASP.NET MVC编程——模型

    1 ViewModel 是一种专门提供给View使用的模型,使用ViewModel的理由是实体或领域模型所包含的属性比View使用的多或少,这种情况下实体或领域模型不适合View使用. 2模型绑定 默 ...

  2. vue技术解析六之生命周期函数

  3. 线程池的submit和execute方法区别

    线程池中的execute方法大家都不陌生,即开启线程执行池中的任务.还有一个方法submit也可以做到,它的功能是提交指定的任务去执行并且返回Future对象,即执行的结果.下面简要介绍一下两者的三个 ...

  4. Linux chgrp命令

    在lunix系统里,文件或目录的权限的掌控以拥有者及所诉群组来管理.可以使用chgrp指令取变更文件与目录所属群组,这种方式采用群组名称或群组识别码都可以.Chgrp命令就是change group的 ...

  5. Python第二话 初识复杂数据类型（list、dictionary、tuple）

    上一篇我们简单认识了数据类型:数字number和字符串string,这篇我们就来隆重介绍一下重量级的数据类型:列表list.字典dictionary和元组tuple. 一.列表List: ①列表是什么 ...

  6. Android 优化APP 构建速度的17条建议

    转载:http://www.jianshu.com/p/a1cc8f2e0877 较长的构建时间将会减缓项目的开发进度,特别是对于大型的项目,app的构建时间长则十几分钟,短则几分钟,长的构建时间已经 ...

  7. shiro（三），使用第三方jdbcRealm连接数据库操作

    这里采用第三方实现好的JdbcRealm连接数据库:首先来看一下源码: 接着前面的说:就把这个类当做我们自己写的就好了,我们需要实例化它,然后给他注入一个数据源 下面是ini文件配置 [main] # ...

  8. android context获取目录详解

    获取 sqlite系统数据库路径 方式1: ApkInfo apkInfo = new ResourceUtil(context).getApkInfo(); APP_PATH = new Strin ...

  9. 集合Collection总览

    前言 声明,本文使用的是JDK1.8 从今天开始正式去学习Java基础中最重要的东西--->集合 无论在开发中,在面试中这个知识点都是非常非常重要的,因此,我在此花费的时间也是很多,得参阅挺多的 ...

  10. linux系统增加开机启动服务/应用

    操作 在/etc/init.d下新建示例脚本文件(customize.sh),该脚本会启动zookeeper服务.内容如下: #!/bin/sh /usr/local/zookeeper-/bin/z ...