angularjs实现的购物金额计算工具示例


Posted in Javascript onMay 08, 2018

本文实例讲述了angularjs实现的购物金额计算工具。分享给大家供大家参考,具体如下:

当我们用js或者jquery进行购物车金额计算的时候会非常麻烦,今天,我们用angularjs一种新的方法进行购物车总额的计算.代码如下:

<!DOCTYPE html>
<html ng-app>
<head>
  <meta charset="UTF-8">
  <title>3water.com angular购物金额计算器</title>
</head>
<body ng-controller="sum">
  价格:<input type="text" ng-model="cup.price">
  <br/><br/>
  数量:<input type="text" ng-model="cup.count">
  <p>运费:{{cup.fee|currency:"¥"}}</p>
  <p>总金额:{{all()|currency:"¥"}}</p><!-- 过滤器currency -->
</body>
<script src="angular.min.js"></script>
<script>
  // 购物金额计算
  function sum($scope){
    $scope.cup={
      "price":12,
      "count":1,
      "fee":20
    }
    $scope.all=function(){
      return $scope.cup.price*$scope.cup.count;
    }
    // $watch
    // 监听变化
    // 有三个参数
    // 1.函数或属性
    // 2.callback
    // 3.true深度监听
    $scope.$watch("all()",function(nval, oval){
      //console.log(nval+":"+oval);
      if(nval<100){
        $scope.cup.fee=20;
      }
      else{
        $scope.cup.fee=0;
      }
    },true)
    $scope.$watch("cup.count",function(nval, oval){
      //console.log(nval+":"+oval);
      if(nval<1){
        $scope.cup.fee=0;
      }
    },true)
  }
</script>
<script>
</script>
</html>

运行效果:

angularjs实现的购物金额计算工具示例

Javascript 相关文章推荐
基于Jquery的将DropDownlist的选中值赋给label的实现代码
May 06 Javascript
jQuery源码中的chunker 正则过滤符分析
Jul 31 Javascript
javascript SpiderMonkey中的函数序列化如何进行
Dec 05 Javascript
js传中文参数controller里获取参数乱码问题解决方法
Jan 03 Javascript
JS生成不重复随机数组的函数代码
Jun 10 Javascript
js控制多图左右滚动切换效果代码分享
Aug 26 Javascript
浅析Bootstrip的select控件绑定数据的问题
May 10 Javascript
基于jQuery.validate及Bootstrap的tooltip开发气泡样式的表单校验组件思路详解
Jul 18 Javascript
JS封装的三级联动菜单(使用时只需要一行js代码)
Oct 24 Javascript
javascript鼠标跟随运动3种效果(眼球效果,苹果菜单,方向跟随)
Oct 27 Javascript
在网页中插入百度地图的步骤详解
Dec 02 Javascript
微信jssdk逻辑在vue中的运用详解
Nov 14 Javascript
Vue微信项目按需授权登录策略实践思路详解
May 07 #Javascript
Vue + better-scroll 实现移动端字母索引导航功能
May 07 #Javascript
node使用promise替代回调函数
May 07 #Javascript
node 使用 async 控制并发的方法
May 07 #Javascript
Angular 数据请求的实现方法
May 07 #Javascript
JavaScript数组去重算法实例小结
May 07 #Javascript
JavaScript求一组数的最小公倍数和最大公约数常用算法详解【面向对象,回归迭代和循环】
May 07 #Javascript
You might like
php简单封装了一些常用JS操作
2007/02/25 PHP
PHP 命令行工具 shell_exec, exec, passthru, system详细使用介绍
2011/09/11 PHP
PHP解析目录路径的3个函数总结
2014/11/18 PHP
php天翼开放平台短信发送接口实现方法
2014/12/22 PHP
Yii2框架redis基本应用示例
2018/07/13 PHP
html中的input标签的checked属性jquery判断代码
2012/09/19 Javascript
js setTimeout 常见问题小结
2013/08/13 Javascript
jquery实现下拉菜单的二级联动利用json对象从DB取值显示联动
2014/03/27 Javascript
Javascript学习笔记之 函数篇(三) : 闭包和引用
2014/11/23 Javascript
本人自用的global.js库源码分享
2015/02/28 Javascript
jquery插件jquery.confirm弹出确认消息
2015/12/22 Javascript
基于javascript简单实现对身份证校验
2021/01/25 Javascript
Vue.js每天必学之组件与组件间的通信
2016/09/08 Javascript
jquery 实现拖动文件上传加载进度条功能
2018/03/18 jQuery
详解如何在Angular优雅编写HTTP请求
2018/12/05 Javascript
重学JS 系列:聊聊继承(推荐)
2019/04/11 Javascript
angularjs请求数据的方法示例
2019/08/06 Javascript
详解vuex数据传输的两种方式及this.$store undefined的解决办法
2019/08/26 Javascript
vue中echarts图表大小适应窗口大小且不需要刷新案例
2020/07/19 Javascript
[01:32]2016国际邀请赛中国区预选赛IG战队首日赛后采访
2016/06/27 DOTA
Python的Flask框架中实现登录用户的个人资料和头像的教程
2015/04/20 Python
Python利用operator模块实现对象的多级排序详解
2017/05/09 Python
Python编程求解二叉树中和为某一值的路径代码示例
2018/01/04 Python
Python SVM(支持向量机)实现方法完整示例
2018/06/19 Python
详解如何用python实现一个简单下载器的服务端和客户端
2019/10/28 Python
Lands’ End英国官方网站:高质量男女服装
2017/10/07 全球购物
FC-Moto美国:欧洲最大的摩托车服装和头盔商店之一
2019/08/24 全球购物
印尼购物网站:iLOTTE
2019/10/16 全球购物
C语言笔试集
2012/07/24 面试题
英语道歉信范文
2014/01/09 职场文书
中级会计职业生涯规划范文
2014/01/16 职场文书
4S店售后客服自我评价
2014/04/09 职场文书
祖国在我心中演讲稿400字
2014/05/04 职场文书
运动会广播稿200米(5篇)
2014/10/15 职场文书
运动员代表致辞
2015/07/29 职场文书
小学秋季运动会加油口号及加油稿
2019/08/19 职场文书