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 Tab选项卡效果代码改进版
Apr 01 Javascript
Js+Jq获取URL参数的集中方法示例代码
May 20 Javascript
分享十五款 jQuery 社交网络分享插件
May 16 Javascript
3种js实现string的substring方法
Nov 09 Javascript
JavaScript数据推送Comet技术详解
Apr 07 Javascript
validationEngine 表单验证插件使用实例代码
Jun 15 Javascript
vue.js实现数据动态响应 Vue.set的简单应用
Jun 15 Javascript
vue2.0与bootstrap3实现列表分页效果
Nov 28 Javascript
简易Vue评论框架的实现(父组件的实现)
Jan 08 Javascript
vue-router的hooks用法详解
Jun 08 Javascript
vuex中遇到的坑,vuex数据改变,组件中页面不渲染操作
Nov 16 Javascript
微信小程序实现弹幕墙(祝福墙)
Nov 18 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微信开发之音乐回复功能
2018/06/14 PHP
JS 判断代码全收集
2009/04/28 Javascript
JQuery each()函数如何优化循环DOM结构的性能
2012/12/10 Javascript
jQuery插件 selectToSelect使用方法
2013/10/02 Javascript
jquery实现将获取的颜色值转换为十六进制形式的方法
2014/12/20 Javascript
js的toLowerCase方法用法实例
2015/01/27 Javascript
javascript显示中文日期的方法
2015/06/18 Javascript
JavaScript取得WEB安全颜色列表的方法
2015/07/14 Javascript
Javascript的表单验证-初识正则表达式
2016/03/18 Javascript
详解nodejs 文本操作模块-fs模块(一)
2016/12/22 NodeJs
BootStrap Table 设置height表头与内容无法对齐的问题
2016/12/28 Javascript
js学习总结之dom2级事件基础知识详解
2017/07/27 Javascript
jQuery EasyUI Layout实现tabs标签的实例
2017/09/26 jQuery
JS实现select选中option触发事件操作示例
2018/07/13 Javascript
微信小程序如何再次获取用户授权的方法
2019/05/10 Javascript
详解vue 动态加载并注册组件且通过 render动态创建该组件
2019/05/30 Javascript
解决layui table表单提示数据接口请求异常的问题
2019/09/24 Javascript
jQuery实现简单飞机大战
2020/07/05 jQuery
基于JavaScript的数据结构队列动画实现示例解析
2020/08/06 Javascript
Python中设置变量访问权限的方法
2015/04/27 Python
Python的“二维”字典 (two-dimension dictionary)定义与实现方法
2016/04/27 Python
详解Python中heapq模块的用法
2016/06/28 Python
在CMD命令行中运行python脚本的方法
2018/05/12 Python
pandas 空的dataframe 插入列名的示例
2018/10/30 Python
基于TensorFlow常量、序列以及随机值生成实例
2020/01/04 Python
Python如何使用正则表达式爬取京东商品信息
2020/06/01 Python
python下载的库包存放路径
2020/07/27 Python
css3中less实现文字长阴影(long shadow)
2020/04/24 HTML / CSS
总经理驾驶员岗位职责
2013/12/04 职场文书
小学生家长评语集锦
2014/01/30 职场文书
2014高三学生考试作弊检讨书
2014/12/14 职场文书
安全学习心得体会范文
2016/01/18 职场文书
SQL注入的实现以及防范示例详解
2021/06/02 MySQL
js基础语法与maven项目配置教程案例
2021/07/15 Javascript
在js中修改html body的样式
2021/11/11 Javascript
Python开发五子棋小游戏
2022/05/02 Python