本文實例講述了AngularJS實現的根據數量與單價計算總價功能。分享給大家供大家參考，具體如下：
先看一下效果：
代碼如下：
<!DOCTYPE html><html lang="en" ng-app><head> <meta charset="UTF-8"> <title>www.49028c.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:'￥' 為過濾器，可將數字格式化為貨幣，不指定時默認是$。
PS：這里再為大家推薦幾款在線計算工具供大家參考使用：
在線投資理財計算器：
http://tools.VeVB.COm/jisuanqi/touzilicai_calc
在線存款計算器：
http://tools.VeVB.COm/jisuanqi/cunkuan_calc
科學計算器在線使用_高級計算器在線計算：
http://tools.VeVB.COm/jisuanqi/jsqkexue
在線計算器_標準計算器：
http://tools.VeVB.COm/jisuanqi/jsq
更多關于AngularJS相關內容感興趣的讀者可查看本站專題：《AngularJS指令操作技巧總結》、《AngularJS入門與進階教程》及《AngularJS MVC架構總結》
希望本文所述對大家AngularJS程序設計有所幫助。
新聞熱點
疑難解答
