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 相关文章推荐
js+html5绘制图片到canvas的方法
Jun 05 Javascript
javascript html5摇一摇功能的实现
Apr 19 Javascript
JS获取子窗口中返回的数据实现方法
May 28 Javascript
js选择器全面解析
Jun 27 Javascript
js替换字符串中所有指定的字符(实现代码)
Aug 17 Javascript
jQuery删除节点用法示例(remove方法)
Sep 08 Javascript
webpack-dev-server自动更新页面方法
Feb 22 Javascript
vue-cli项目中使用公用的提示弹层tips或加载loading组件实例详解
May 28 Javascript
从零开始学习搭建React脚手架项目
Aug 23 Javascript
Node.js 使用axios读写influxDB的方法示例
Oct 26 Javascript
浅谈layui 表单元素的选中问题
Oct 25 Javascript
基于Vue的侧边目录组件的实现
Feb 05 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开发中常用的字符串操作函数
2011/02/08 PHP
Fine Uploader文件上传组件应用介绍
2013/01/06 PHP
PHP表单递交控件名称含有点号(.)会被转化为下划线(_)的处理方法
2013/01/06 PHP
php递归创建目录的方法
2015/02/02 PHP
CI(CodeIgniter)框架视图中加载视图的方法
2017/03/24 PHP
PHP封装的PDO数据库操作类实例
2017/06/21 PHP
php+ajax实现商品对比功能示例
2019/04/13 PHP
PHP进阶学习之垃圾回收机制详解
2019/06/18 PHP
不要小看注释掉的JS 引起的安全问题
2008/12/27 Javascript
基于jquery的地址栏射击游戏代码
2011/03/10 Javascript
js jquery ajax的几种用法总结(及优缺点介绍)
2014/01/28 Javascript
JavaScript调用ajax获取文本文件内容实现代码
2014/03/28 Javascript
jQuery修改CSS伪元素属性的方法
2014/07/30 Javascript
Javascript实现单张图片浏览
2014/12/18 Javascript
JS实现Fisheye效果动感放大菜单代码
2015/10/21 Javascript
JavaScript实现省市县三级级联特效
2017/05/16 Javascript
详解Layer弹出层样式
2017/08/21 Javascript
原生JS实现图片无缝滚动方法(附带封装的运动框架)
2017/10/01 Javascript
javaScript canvas实现(画笔大小 颜色 橡皮的实例)
2017/11/28 Javascript
js刷新页面location.reload()用法详解
2019/12/09 Javascript
vue动态合并单元格并添加小计合计功能示例
2020/11/26 Vue.js
python实现马耳可夫链算法实例分析
2015/05/20 Python
Python爬取当当、京东、亚马逊图书信息代码实例
2017/12/09 Python
Python二元赋值实用技巧解析
2019/10/25 Python
TensorFlow实现模型断点训练,checkpoint模型载入方式
2020/05/26 Python
python tqdm库的使用
2020/11/30 Python
12个不为大家熟知的HTML5设计小技巧
2016/06/02 HTML / CSS
HTML5实现直播间评论滚动效果的代码
2020/05/27 HTML / CSS
沙特阿拉伯电子产品和家用电器购物网站:Black Box
2019/07/24 全球购物
华硕新加坡官方网上商店:ASUS Singapore
2020/07/09 全球购物
采购主管岗位职责
2014/02/01 职场文书
贯彻学习两会心得体会范文
2014/03/17 职场文书
孝敬父母的演讲稿
2014/05/14 职场文书
赔偿协议书范本
2014/09/12 职场文书
党员活动总结
2015/02/04 职场文书
解决ubuntu安装软件时,status-code=409报错的问题
2022/12/24 Servers