溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文實例講述了AngularJS實現的根據數量與單價計算總價功能。分享給大家供大家參考，具體如下：
先看一下效果：
代碼如下：
<!DOCTYPE html>
<html lang="en" ng-app>
<head>
<meta charset="UTF-8">
<title>www.jb51.net 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.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相關內容感興趣的讀者可查看本站專題：《AngularJS指令操作技巧總結》、《AngularJS入門與進階教程》及《AngularJS MVC架構總結》
希望本文所述對大家AngularJS程序設計有所幫助。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
