AngularJS實現的根據數量與單價計算總價功能示例

本文實例講述了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程序設計有所幫助。

分享題目：AngularJS實現的根據數量與單價計算總價功能示例
當前地址：http://m.kartarina.com/article10/jedpgo.html

成都網站建設公司_創新互聯，為您提供App設計、做網站、企業建站、網頁設計公司、外貿建站、網站制作