AngularJS實(shí)現(xiàn)的根據(jù)數(shù)量與單價(jià)計(jì)算總價(jià)功能示例
本文實(shí)例講述了AngularJS實(shí)現(xiàn)的根據(jù)數(shù)量與單價(jià)計(jì)算總價(jià)功能。分享給大家供大家參考，具體如下：
先看一下效果：
代碼如下：
<!DOCTYPE html>
<html lang="en" ng-app>
<head>
<meta charset="UTF-8">
<title>www.dbjr.com.cn angular計(jì)算總價(jià)</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>單價(jià):</td><td><input type="text" ng-model="price"></td></tr>
<tr><td>數(shù)量:</td><td><input type="text" ng-model="number"></td></tr>
<tr><td>總價(jià):</td><td>{{price*number|currency:'￥'}}</td></tr>
</table>
</body>
</html>
需要注意幾點(diǎn)：
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"> 數(shù)據(jù)來(lái)自擁有ng-model="price"/ng-model="number"屬性的input輸入框;
4.<td>{{price*number|currency:'￥'}} 從input中獲取到數(shù)據(jù)之后，進(jìn)行{{ }}里的運(yùn)算，將結(jié)果展示在td中。其中 | currency:'￥' 為過(guò)濾器，可將數(shù)字格式化為貨幣，不指定時(shí)默認(rèn)是$。
PS：這里再為大家推薦幾款在線計(jì)算工具供大家參考使用：
在線投資理財(cái)計(jì)算器：
http://tools.jb51.net/jisuanqi/touzilicai_calc
在線存款計(jì)算器：
http://tools.jb51.net/jisuanqi/cunkuan_calc
科學(xué)計(jì)算器在線使用_高級(jí)計(jì)算器在線計(jì)算：
http://tools.jb51.net/jisuanqi/jsqkexue
在線計(jì)算器_標(biāo)準(zhǔn)計(jì)算器：
http://tools.jb51.net/jisuanqi/jsq
更多關(guān)于AngularJS相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《AngularJS指令操作技巧總結(jié)》、《AngularJS入門與進(jìn)階教程》及《AngularJS MVC架構(gòu)總結(jié)》
希望本文所述對(duì)大家AngularJS程序設(shè)計(jì)有所幫助。
- Angularjs 雙向綁定時(shí)字符串的轉(zhuǎn)換成數(shù)字類型的問(wèn)題
- Angularjs中的驗(yàn)證input輸入框只能輸入數(shù)字和小數(shù)點(diǎn)的寫法（推薦）
- angularjs實(shí)現(xiàn)猜數(shù)字大小功能
- AngularJS實(shí)現(xiàn)的生成隨機(jī)數(shù)與猜數(shù)字大小功能示例
- Angular限制input框輸入金額（是小數(shù)的話只保留兩位小數(shù)點(diǎn)）
- angularjs實(shí)現(xiàn)的購(gòu)物金額計(jì)算工具示例
- Angular實(shí)現(xiàn)可刪除并計(jì)算總金額的購(gòu)物車功能示例
- Angular實(shí)現(xiàn)購(gòu)物車計(jì)算示例代碼
- angular 實(shí)現(xiàn)的輸入框數(shù)字千分位及保留幾位小數(shù)點(diǎn)功能示例
相關(guān)文章
Angular.JS中指令ng-if的注意事項(xiàng)小結(jié)
這篇文章主要給大家分享了關(guān)于Angular.JS中指令ng-if的一點(diǎn)注意事項(xiàng)，分享出來(lái)供大家參考學(xué)習(xí)，文中介紹的還是相對(duì)來(lái)說(shuō)比較詳細(xì)，對(duì)大家具有一定的參考借鑒價(jià)值，需要的朋友們下面來(lái)一起看看吧。2017-06-06
angularJS與bootstrap結(jié)合實(shí)現(xiàn)動(dòng)態(tài)加載彈出提示內(nèi)容
這篇文章主要介紹了angularJS與bootstrap結(jié)合實(shí)現(xiàn)動(dòng)態(tài)加載彈出提示內(nèi)容,通過(guò)bootstrp彈出提示。感興趣的朋友可以參考下本篇文章2015-10-10
angular實(shí)現(xiàn)頁(yè)面打印局部功能的思考與方法
這篇文章主要給大家介紹了關(guān)于angular實(shí)現(xiàn)頁(yè)面打印局部功能的思考與方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2018-04-04
下面小編就為大家?guī)?lái)一篇淺談AngularJS中ng-class的使用方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-11-11
這篇文章主要介紹了AngularJS中的DOM操作,較為詳細(xì)的分析了AngularJS針對(duì)DOM操作的原理、實(shí)現(xiàn)技巧與相關(guān)注意事項(xiàng),需要的朋友可以參考下2016-11-11
angularjs學(xué)習(xí)筆記之雙向數(shù)據(jù)綁定
AngularJS在$scope變量中使用臟值檢查來(lái)實(shí)現(xiàn)了數(shù)據(jù)雙向綁定。和Ember.js數(shù)據(jù)雙向綁定中動(dòng)態(tài)設(shè)施setter和getter不同，臟治檢查允許AngularJS監(jiān)視那些存在或者不存在的變量。2015-09-09
Bootstrap和Angularjs配合自制彈框的實(shí)例代碼
今天小編通過(guò)本文給大家分享Bootstrap和Angularjs配合自制彈框的實(shí)例代碼，代碼簡(jiǎn)單易懂，有需要的朋友跟著小編一起學(xué)習(xí)2016-08-08
這篇文章主要介紹了Angular1.x自定義指令,結(jié)合實(shí)例形式分析了Angular1.x自定義指令的實(shí)現(xiàn)與使用方法,以及相關(guān)操作技巧與注意事項(xiàng),需要的朋友可以參考下2017-03-03
angularjs數(shù)組判斷是否含有某個(gè)元素的實(shí)例
下面小編就為大家分享一篇angularjs數(shù)組判斷是否含有某個(gè)元素的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-02-02
這篇文章主要介紹了angular1配合gulp和bower使用教程，本文給大家介紹的非常詳細(xì)，具有參考借鑒價(jià)值,需要的朋友可以參考下2018-01-01