AngularJS實現(xiàn)的根據(jù)數(shù)量與單價計算總價功能示例
本文實例講述了AngularJS實現(xiàn)的根據(jù)數(shù)量與單價計算總價功能。分享給大家供大家參考,具體如下:
先看一下效果:
代碼如下:
<!DOCTYPE html> <html lang="en" ng-app> <head> <meta charset="UTF-8"> <title>www.dbjr.com.cn 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>數(shù)量:</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">
數(shù)據(jù)來自擁有ng-model="price"/ng-model="number"屬性的input輸入框;
4.<td>{{price*number|currency:'¥'}}
從input中獲取到數(shù)據(jù)之后,進行{{ }}里的運算,將結(jié)果展示在td中。其中 | currency:'¥' 為過濾器,可將數(shù)字格式化為貨幣,不指定時默認是$。
PS:這里再為大家推薦幾款在線計算工具供大家參考使用:
在線投資理財計算器:
http://tools.jb51.net/jisuanqi/touzilicai_calc
在線存款計算器:
http://tools.jb51.net/jisuanqi/cunkuan_calc
科學計算器在線使用_高級計算器在線計算:
http://tools.jb51.net/jisuanqi/jsqkexue
在線計算器_標準計算器:
http://tools.jb51.net/jisuanqi/jsq
更多關于AngularJS相關內(nèi)容感興趣的讀者可查看本站專題:《AngularJS指令操作技巧總結(jié)》、《AngularJS入門與進階教程》及《AngularJS MVC架構(gòu)總結(jié)》
希望本文所述對大家AngularJS程序設計有所幫助。
- Angularjs 雙向綁定時字符串的轉(zhuǎn)換成數(shù)字類型的問題
- Angularjs中的驗證input輸入框只能輸入數(shù)字和小數(shù)點的寫法(推薦)
- angularjs實現(xiàn)猜數(shù)字大小功能
- AngularJS實現(xiàn)的生成隨機數(shù)與猜數(shù)字大小功能示例
- Angular限制input框輸入金額(是小數(shù)的話只保留兩位小數(shù)點)
- angularjs實現(xiàn)的購物金額計算工具示例
- Angular實現(xiàn)可刪除并計算總金額的購物車功能示例
- Angular實現(xiàn)購物車計算示例代碼
- angular 實現(xiàn)的輸入框數(shù)字千分位及保留幾位小數(shù)點功能示例
相關文章
Angular.JS中指令ng-if的注意事項小結(jié)
這篇文章主要給大家分享了關于Angular.JS中指令ng-if的一點注意事項,分享出來供大家參考學習,文中介紹的還是相對來說比較詳細,對大家具有一定的參考借鑒價值,需要的朋友們下面來一起看看吧。2017-06-06angularJS與bootstrap結(jié)合實現(xiàn)動態(tài)加載彈出提示內(nèi)容
這篇文章主要介紹了angularJS與bootstrap結(jié)合實現(xiàn)動態(tài)加載彈出提示內(nèi)容,通過bootstrp彈出提示。感興趣的朋友可以參考下本篇文章2015-10-10Bootstrap和Angularjs配合自制彈框的實例代碼
今天小編通過本文給大家分享Bootstrap和Angularjs配合自制彈框的實例代碼,代碼簡單易懂,有需要的朋友跟著小編一起學習2016-08-08