1. <!DOCTYPE html>
  2. <html lang="en" ng-app="shopApp">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>angular购物车小计</title>
  6.     <script src="angular.min.js"></script>
  7.     <script>
  8.         //angular的模块化，模块名是ng-app定义的模块名，ng-app='模块名'是指定从哪个模块开始初始化
  9.         var shopApp=angular.module('shopApp',[]);
  10.         //angular的写法是shopApp.controller('函数名',function($scope){});，但是这种写法在压缩代码的时候会改变参数$scope,导致angular不识别这个被改变的参数
  11.         shopApp.controller('shopCar',['$scope',function($scope){
  12.             //在$scope上定义一个变量，使用json来存储需要使用的数据
  13.             $scope.phone={
  14.                 price:,
  15.                 num:,
  16.                 fre:
  17.             };
  18.             //同样的再$scope上也可以添加求和方法，并返回到需要的数据中,在angular中方法作用域变量会优先找自己作用域中的变量值，如果找不到会一级一级的往上找
  19.             $scope.sum=function(){
  20.                 return $scope.phone.price * $scope.phone.num;
  21.             };
  22.             //监听运费的实时变化，当购物金额大于5000元的时候免运费，当购物金额小于5000元的时候运费为10元
  23.             $scope.$watch($scope.sum,function(newVal,oldVal){
  24.                 $scope.phone.fre=newVal >= ?  :  ;
  25.             },true);
  26.         }]);
  27.     </script>
  28. </head>
  29. <body>
  30.     <div ng-controller="shopCar">
  31.         <p>价格：<input type="text" ng-model="phone.price"></p>
  32.         <p>个数：<input type="text" ng-model="phone.num"></p>
  33.         <p>商品总价：<span>{{sum() | currency:'￥'}}</span></p>
  34.         <p>运费合计：<span>{{phone.fre | currency:'￥'}}</span></p>
  35.         <p>总计：<span>{{sum() + phone.fre | currency:'￥'}}</span></p>
  36.     </div>
  37. </body>
  38. </html>

简单的angular购物车商品小计的更多相关文章

  1. 购物车功能：使用jQuery实现购物车全选反选，单选，商品增删，小计等功能

    效果图: html: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...

  2. e3mall商城总结12之购物车的实现、以及购物车小计问题、json406报错

    说在前面的话 1.本节主要讲了e3mall购物车的实现方法,我搭建的项目和系统购物车有一些区别,因此这里需要说一下.系统搭建的项目在未登陆的情况下也可以通过cookie进行加入购物车,当用户要下单的时 ...

  3. python实现简单的循环购物车小功能

    python实现简单的循环购物车小功能 # -*- coding: utf-8 -*- __author__ = 'hujianli' shopping = [ ("iphone6s&quo ...

  4. 用java代码写一个简单的网上购物车程序

    需求:1.写一个商品类,有商品编号.商品名称.商品分类.商品单价属性.2.写一个商品条目信息类,有商品和数量两个属性,有商品总价格方法. 3.写一个购物车类,有添加商品方法.查看订单信息,删除商品,修 ...

  5. 每日学习心得：SQL查询表的行列转换/小计/统计（with rollup，with cube，pivot解析）

    2013-8-20 1.    SQL查询表的行列转换/小计/统计(with  rollup,with cube,pivot解析) 在实际的项目开发中有很多项目都会有报表模块,今天就通过一个小的SQL ...

  6. 用SQL实现统计报表中的"小计"与"合计"的方法详解

    本篇文章是对使用SQL实现统计报表中的"小计"与"合计"的方法进行了详细的分析介绍,需要的朋友参考下   客户提出需求,针对某一列分组加上小计,合计汇总.网上找 ...

  7. SQL查询表的行列转换/小计/统计（with rollup，with cube，pivot解析）

    SQL查询表的行列转换/小计/统计(with rollup,with cube,pivot解析) 2013-8-20 1.    SQL查询表的行列转换/小计/统计(with  rollup,with ...

  8. JXLS 2.4.0系列教程（四）——拾遗 如何做页面小计

    注:阅读本文前,请先阅读第四篇文章. http://www.cnblogs.com/foxlee1024/p/7619845.html 前面写了第四篇教程,发现有些东西忘了讲了,这里补回来. 忘了讲两 ...

  9. 简单的python购物车

                 这几天,一直在学python,跟着视频老师做了一个比较简单的python购物车,感觉不错,分享一下 products = [['Iphone8',6888],['MacPro ...

随机推荐

  1. C++_系列自学课程_第_10_课_表达式_《C++ Primer 第四版》

    程序设计语言中大部分程序都在进行表达式的求值操作, 例如求两个数的和,求一个表达式的逻辑结果,或者通过输入输出表达式语句进行输入和输出. 这里我们对表达式进行讨论. 一.表达式 1.表达式 表达式由一 ...

  2. Lind.DDD.ExpressionExtensions动态构建表达式树，实现对数据集的权限控制

    回到目录 Lind.DDD框架里提出了对数据集的控制,某些权限的用户为某些表添加某些数据集的权限,具体实现是在一张表中存储用户ID,表名,检索字段,检索值和检索操作符,然后用户登陆后,通过自己权限来构 ...

  3. java web学习总结(六) -------------------servlet开发(二)

    一.ServletConfig讲解 1.1.配置Servlet初始化参数 在Servlet的配置文件web.xml中,可以使用一个或多个<init-param>标签为servlet配置一些 ...

  4. 轻松掌握：JavaScript模板方法模式

    模板方法模式 假如我们有一些对象,各个对象之间有一些相同的行为,也有一些不同的行为,这时,我们就可以用模板方法模式来把相同的部分上移到它们的共同原型中(父类),而将不同的部分留给自己各自重新实现. 模 ...

  5. 在C#开发中如何使用Client Object Model客户端代码获得SharePoint 网站、列表的权限情况

    自从人类学会了使用火,烤制的方式替代了人类的消化系统部分功能,从此人类的消化系统更加简单,加速了人脑的进化:自从SharePoint 2010开始有了Client Side Object Model ...

  6. iOS多线程之3.NSThread的线程间通信

      我们把一些耗时操作放在子线程,例如下载图片,但是下载完毕我们不能在子线程更新UI,因为只有主线程才可以更新UI和处理用户的触摸事件,否则程序会崩溃.此时,我们就需要把子线程下载完毕的数据传递到主线 ...

  7. Android编码规范02

    同一项目开发过程中需要所有开发人员都有一种风格,做Android项目就要统一遵从Android代码风格: 要想了解Android的代码风格,最好的方式就是查看Android源代码: 下载Android ...

  8. CouchDB简介

    类型:开源数据库,Apache项目 存储格式:JSON 查询语言:JavaScript API :MapReduce.HTTP 特点 MVCC(Multiversion concurrency con ...

  9. Linux 日志报错 xxx blocked for more than 120 seconds

    监控作业发现一台服务器(Red Hat Enterprise Linux Server release 5.7)从凌晨1:32开始,有一小段时间无法响应,数据库也连接不上,后面又正常了.早上检查了监听 ...

  10. Sqoop 结合多种系统的具体应用

    Sqoop与HDFS结合 下面我们结合 HDFS,介绍 Sqoop 从关系型数据库的导入和导出. Sqoop import 它的功能是将数据从关系型数据库导入 HDFS 中,其流程图如下所示. 我们来 ...