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 相关文章推荐
js中top、clientTop、scrollTop、offsetTop的区别 文字详细说明版
Jan 08 Javascript
js中if语句的几种优化代码写法
Mar 12 Javascript
JS继承 笔记
Jul 13 Javascript
jQuery插件分享之分页插件jqPagination
Jun 06 Javascript
node.js中的fs.fstatSync方法使用说明
Dec 15 Javascript
jQuery获得document和window对象宽度和高度的方法
Mar 25 Javascript
JavaScript中eval()函数用法详解
Dec 14 Javascript
第一次接触神奇的Bootstrap导航条
Aug 09 Javascript
js实现浏览器倒计时跳转页面效果
Aug 12 Javascript
jQuery使用deferreds串行多个ajax请求
Aug 22 Javascript
ES6新特性一: let和const命令详解
Apr 20 Javascript
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
Feb 23 Vue.js
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
Terran剧情介绍
2020/03/14 星际争霸
PHP实现多条件查询实例代码
2010/07/17 PHP
php下拉选项的批量操作的实现代码
2013/10/14 PHP
Laravel5.1 框架Request请求操作常见用法实例分析
2020/01/04 PHP
thinkphp5 框架结合plupload实现图片批量上传功能示例
2020/04/04 PHP
在JavaScript里嵌入大量字符串常量的实现方法
2013/07/07 Javascript
使用js对select动态添加和删除OPTION示例代码
2013/08/12 Javascript
在页面中js获取光标/鼠标的坐标及光标的像素坐标
2013/11/11 Javascript
javascript学习笔记--数字格式类型
2014/05/22 Javascript
nodejs中简单实现Javascript Promise机制的实例
2014/12/06 NodeJs
原生javascript实现Tab选项卡切换功能
2015/01/12 Javascript
jQuery实现菜单感应鼠标滑动动画效果的方法
2015/02/28 Javascript
js简单实现标签云效果实例
2015/08/06 Javascript
使用jQuery实现Web页面换肤功能的要点解析
2016/05/12 Javascript
jQuery实现的多张图无缝滚动效果【测试可用】
2016/09/12 Javascript
五步轻松实现JavaScript HTML时钟效果
2020/03/25 Javascript
[26:52]LGD vs EG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
python读取文件名称生成list的方法
2018/04/27 Python
Django中间件实现拦截器的方法
2018/06/01 Python
python中for用来遍历range函数的方法
2018/06/08 Python
python try 异常处理(史上最全)
2019/03/07 Python
python实现小球弹跳效果
2019/05/10 Python
python实现的爬取电影下载链接功能示例
2019/08/26 Python
python+opencv3生成一个自定义纯色图教程
2020/02/19 Python
python实现图像拼接
2020/03/05 Python
Anaconda+VSCode配置tensorflow开发环境的教程详解
2020/03/30 Python
详解python如何引用包package
2020/06/07 Python
浅谈CSS3特性查询(Feature Query: @supports)功能简介
2017/07/31 HTML / CSS
HTML5中图片之间的缝隙完美解决方法
2017/07/07 HTML / CSS
得到Class的三个过程是什么
2012/08/10 面试题
高中军训感言600字
2014/03/11 职场文书
给校长的建议书600字
2014/05/15 职场文书
2014年党员个人工作总结
2014/12/02 职场文书
办公室主任个人总结
2015/02/28 职场文书
初中生思想道德自我评价
2015/03/09 职场文书
Spring Boot 整合 Apache Dubbo的示例代码
2021/07/04 Java/Android