AngularJS实现的根据数量与单价计算总价功能示例


Posted in Javascript onDecember 26, 2017

本文实例讲述了AngularJS实现的根据数量与单价计算总价功能。分享给大家供大家参考,具体如下:

先看一下效果:

AngularJS实现的根据数量与单价计算总价功能示例

代码如下:

<!DOCTYPE html>
<html lang="en" ng-app>
<head>
 <meta charset="UTF-8">
 <title>3water.com angular计算总价</title>
 <link rel="stylesheet" type="text/css" href="style.css" rel="external nofollow" >
 <script type="text/javascript" src="../libs/angular.min.js"></script>
</head>
<body>
 <table>
  <tr><td>单价:</td><td><input type="text" ng-model="price"></td></tr>
  <tr><td>数量:</td><td><input type="text" ng-model="number"></td></tr>
  <tr><td>总价:</td><td>{{price*number|currency:'¥'}}</td></tr>
 </table>
</body>
</html>

需要注意几点:

1.<script type="text/javascript" src="../libs/angular.min.js"></script>      引入angularjs脚本;
2.<html lang="en" ng-app>         声明ng-app
3.<input type="text" ng-model="price">      数据来自拥有ng-model="price"/ng-model="number"属性的input输入框;
4.<td>{{price*number|currency:'¥'}}        从input中获取到数据之后,进行{{ }}里的运算,将结果展示在td中。其中 | currency:'¥' 为过滤器,可将数字格式化为货币,不指定时默认是$。

Javascript 相关文章推荐
jquery 模拟雅虎首页的点击对话框效果
Apr 11 Javascript
Javascript动态绑定事件的简单实现代码
Dec 25 Javascript
js判断当页面无法回退时关闭网页否则就history.go(-1)
Aug 07 Javascript
JS+CSS实现经典的左侧竖向滑动菜单效果
Sep 23 Javascript
Angular自定义组件实现数据双向数据绑定的实例
Dec 11 Javascript
详解Angular如何正确的操作DOM
Jul 06 Javascript
vue 2.1.3 实时显示当前时间,每秒更新的方法
Sep 16 Javascript
详解在React项目中安装并使用Less(用法总结)
Mar 18 Javascript
WebGL three.js学习笔记之阴影与实现物体的动画效果
Apr 25 Javascript
原生JS实现随机点名项目的实例代码
Apr 30 Javascript
vue实现表单录入小案例
Sep 27 Javascript
vue实现弹幕功能
Oct 25 Javascript
细说webpack源码之compile流程-rules参数处理技巧(1)
Dec 26 #Javascript
Bootstrap 模态框多次显示后台提交多次BUG的解决方法
Dec 26 #Javascript
细说webpack源码之compile流程-入口函数run
Dec 26 #Javascript
Vue 进入/离开动画效果
Dec 26 #Javascript
node.js中路由,中间件,ge请求和post请求的参数详解
Dec 26 #Javascript
Angular实现可删除并计算总金额的购物车功能示例
Dec 26 #Javascript
浅谈React深度编程之受控组件与非受控组件
Dec 26 #Javascript
You might like
php更新mysql后获取影响的行数发生异常解决方法
2013/03/28 PHP
php三维数组去重(示例代码)
2013/11/26 PHP
用jQuery获取IE9下拉框默认值问题探讨
2013/07/22 Javascript
javascript 函数及作用域总结介绍
2013/11/12 Javascript
jQuery实现加入购物车飞入动画效果
2015/03/14 Javascript
Javascript中的数组常用方法解析
2016/06/17 Javascript
nodejs之get/post请求的几种方式小结
2017/07/26 NodeJs
angular4 JavaScript内存溢出问题
2018/03/06 Javascript
Javasript设计模式之链式调用详解
2018/04/26 Javascript
详解Vue2.0组件的继承与扩展
2018/11/23 Javascript
Vue渲染过程浅析
2019/03/14 Javascript
微信小程序实现搜索指定景点周边美食、酒店
2019/05/18 Javascript
微信小程序如何调用图片接口API并居中显示
2019/06/29 Javascript
JavaScript canvas仿代码流瀑布
2020/02/10 Javascript
多页vue应用的单页面打包方法(内含打包模式的应用)
2020/06/11 Javascript
Vue2.0 ES6语法降级ES5的操作
2020/10/30 Javascript
python3+PyQt5实现使用剪贴板做复制与粘帖示例
2017/01/24 Python
Django实现自定义404,500页面教程
2017/03/26 Python
使用python生成杨辉三角形的示例代码
2018/08/29 Python
python+opencv实现高斯平滑滤波
2020/07/21 Python
python使用knn实现特征向量分类
2018/12/26 Python
Python Pillow Image Invert
2019/01/22 Python
python将字典内容写入json文件的实例代码
2020/08/12 Python
css3实现一个div设置多张背景图片及background-image属性实例演示
2017/08/10 HTML / CSS
自定义html标记替换html5新增元素
2008/10/17 HTML / CSS
名人珠宝设计师:Melinda Maria Jewelry
2019/03/06 全球购物
求∏的近似值,直到最后一项的绝对值小于指定的数
2016/02/12 面试题
年终自我鉴定
2013/10/09 职场文书
大学生自我鉴定范文
2013/12/28 职场文书
《天安门广场》教学反思
2014/04/23 职场文书
勿忘国耻9.18演讲稿(经典篇)
2014/09/14 职场文书
派出所正风肃纪剖析材料
2014/10/10 职场文书
故宫导游词
2015/01/31 职场文书
管理失职检讨书
2015/05/05 职场文书
大学生暑假实习总结
2015/07/13 职场文书
详解盒子端CSS动画性能提升
2021/05/24 HTML / CSS