欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

AngularJS實現(xiàn)的根據(jù)數(shù)量與單價計算總價功能示例

 更新時間：2017年12月26日 09:49:01   作者：Tiramisu_C  
這篇文章主要介紹了AngularJS實現(xiàn)的根據(jù)數(shù)量與單價計算總價功能,涉及AngularJS事件響應(yīng)與數(shù)值運算相關(guān)操作技巧,需要的朋友可以參考下

本文實例講述了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

科學(xué)計算器在線使用_高級計算器在線計算：
http://tools.jb51.net/jisuanqi/jsqkexue

在線計算器_標準計算器：
http://tools.jb51.net/jisuanqi/jsq

更多關(guān)于AngularJS相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《AngularJS指令操作技巧總結(jié)》、《AngularJS入門與進階教程》及《AngularJS MVC架構(gòu)總結(jié)》

希望本文所述對大家AngularJS程序設(shè)計有所幫助。

相關(guān)文章

  • Angular.JS中指令ng-if的注意事項小結(jié)

    Angular.JS中指令ng-if的注意事項小結(jié)

    這篇文章主要給大家分享了關(guān)于Angular.JS中指令ng-if的一點注意事項，分享出來供大家參考學(xué)習，文中介紹的還是相對來說比較詳細，對大家具有一定的參考借鑒價值，需要的朋友們下面來一起看看吧。
    2017-06-06
  • angularJS與bootstrap結(jié)合實現(xiàn)動態(tài)加載彈出提示內(nèi)容

    angularJS與bootstrap結(jié)合實現(xiàn)動態(tài)加載彈出提示內(nèi)容

    這篇文章主要介紹了angularJS與bootstrap結(jié)合實現(xiàn)動態(tài)加載彈出提示內(nèi)容,通過bootstrp彈出提示。感興趣的朋友可以參考下本篇文章
    2015-10-10
  • angular實現(xiàn)頁面打印局部功能的思考與方法

    angular實現(xiàn)頁面打印局部功能的思考與方法

    這篇文章主要給大家介紹了關(guān)于angular實現(xiàn)頁面打印局部功能的思考與方法，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習或者工作具有一定的參考學(xué)習價值，需要的朋友們下面隨著小編來一起學(xué)習學(xué)習吧。
    2018-04-04
  • 淺談AngularJS中ng-class的使用方法

    淺談AngularJS中ng-class的使用方法

    下面小編就為大家?guī)硪黄獪\談AngularJS中ng-class的使用方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2016-11-11
  • AngularJS中的DOM操作用法分析

    AngularJS中的DOM操作用法分析

    這篇文章主要介紹了AngularJS中的DOM操作,較為詳細的分析了AngularJS針對DOM操作的原理、實現(xiàn)技巧與相關(guān)注意事項,需要的朋友可以參考下
    2016-11-11
  • angularjs學(xué)習筆記之雙向數(shù)據(jù)綁定

    angularjs學(xué)習筆記之雙向數(shù)據(jù)綁定

    AngularJS在$scope變量中使用臟值檢查來實現(xiàn)了數(shù)據(jù)雙向綁定。和Ember.js數(shù)據(jù)雙向綁定中動態(tài)設(shè)施setter和getter不同，臟治檢查允許AngularJS監(jiān)視那些存在或者不存在的變量。
    2015-09-09
  • Bootstrap和Angularjs配合自制彈框的實例代碼

    Bootstrap和Angularjs配合自制彈框的實例代碼

    今天小編通過本文給大家分享Bootstrap和Angularjs配合自制彈框的實例代碼，代碼簡單易懂，有需要的朋友跟著小編一起學(xué)習
    2016-08-08
  • Angular1.x自定義指令實例詳解

    Angular1.x自定義指令實例詳解

    這篇文章主要介紹了Angular1.x自定義指令,結(jié)合實例形式分析了Angular1.x自定義指令的實現(xiàn)與使用方法,以及相關(guān)操作技巧與注意事項,需要的朋友可以參考下
    2017-03-03
  • angularjs數(shù)組判斷是否含有某個元素的實例

    angularjs數(shù)組判斷是否含有某個元素的實例

    下面小編就為大家分享一篇angularjs數(shù)組判斷是否含有某個元素的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-02-02
  • angular1配合gulp和bower的使用教程

    angular1配合gulp和bower的使用教程

    這篇文章主要介紹了angular1配合gulp和bower使用教程，本文給大家介紹的非常詳細，具有參考借鑒價值,需要的朋友可以參考下
    2018-01-01

最新評論