快捷導(dǎo)航

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

更新時(shí)間：2017年12月26日 09:49:01 作者：Tiramisu_C

這篇文章主要介紹了AngularJS實(shí)現(xiàn)的根據(jù)數(shù)量與單價(jià)計(jì)算總價(jià)功能,涉及AngularJS事件響應(yīng)與數(shù)值運(yùn)算相關(guān)操作技巧,需要的朋友可以參考下

本文實(shí)例講述了AngularJS實(shí)現(xiàn)的根據(jù)數(shù)量與單價(jià)計(jì)算總價(jià)功能。分享給大家供大家參考，具體如下：

先看一下效果：

代碼如下：

<!DOCTYPE html>
<html lang="en" ng-app>
<head>
 <meta charset="UTF-8">
 <title>m.fzitv.net angular計(jì)算總價(jià)</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>單價(jià):</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>總價(jià):</td><td>{{price*number|currency:'￥'}}</td></tr>
 </table>
</body>
</html>

需要注意幾點(diǎn)：

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ù)來(lái)自擁有ng-model="price"/ng-model="number"屬性的input輸入框;
4.<td>{{price*number|currency:'￥'}}        從input中獲取到數(shù)據(jù)之后，進(jìn)行{{ }}里的運(yùn)算，將結(jié)果展示在td中。其中 | currency:'￥' 為過(guò)濾器，可將數(shù)字格式化為貨幣，不指定時(shí)默認(rèn)是$。

PS：這里再為大家推薦幾款在線計(jì)算工具供大家參考使用：

在線投資理財(cái)計(jì)算器：
http://tools.jb51.net/jisuanqi/touzilicai_calc

在線存款計(jì)算器：
http://tools.jb51.net/jisuanqi/cunkuan_calc

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

在線計(jì)算器_標(biāo)準(zhǔn)計(jì)算器：
http://tools.jb51.net/jisuanqi/jsq

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

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

您可能感興趣的文章:

相關(guān)文章

angular中的observable問(wèn)題
這篇文章主要介紹了angular中的observable問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-10-10
angular2使用簡(jiǎn)單介紹
Angular2開(kāi)發(fā)者預(yù)覽版出來(lái)已有一段時(shí)間，這個(gè)以速度與移動(dòng)性能為目的的框架到底如何，今天我們來(lái)結(jié)合官網(wǎng)的demo嘗試一下。
2016-03-03
AngularJS 工作原理詳解
本文主要介紹AngularJS 工作原理,這里整理了相關(guān)資料及示例代碼，有興趣的小伙伴可以參考下
2016-08-08
Angular的$http的ajax的請(qǐng)求操作（推薦）
這篇文章主要介紹了Angular的$http的ajax的請(qǐng)求操作的相關(guān)資料,需要的朋友可以參考下
2017-01-01
angular共享依賴(lài)的解決方案分享
這篇文章主要給大家介紹了關(guān)于angular共享依賴(lài)解決方案的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-10-10
Angular 4.x 動(dòng)態(tài)創(chuàng)建表單實(shí)例
本篇文章主要介紹了Angular 4.x 動(dòng)態(tài)創(chuàng)建表單實(shí)例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-04-04
使用Angular.js實(shí)現(xiàn)簡(jiǎn)單的購(gòu)物車(chē)功能
在各大購(gòu)物網(wǎng)站大家都可以簡(jiǎn)單購(gòu)物車(chē)效果演示，下面通過(guò)本文給大家分享一段代碼關(guān)于使用Angular.js實(shí)現(xiàn)簡(jiǎn)單的購(gòu)物車(chē)功能，需要的朋友可以參考下
2016-11-11
詳解webpack+angular2開(kāi)發(fā)環(huán)境搭建
這篇文章主要介紹了詳解webpack+angular2開(kāi)發(fā)環(huán)境搭建，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-06-06
Angular.js實(shí)現(xiàn)動(dòng)態(tài)加載組件詳解
這篇文章主要給大家介紹了關(guān)于Angular.js實(shí)現(xiàn)動(dòng)態(tài)加載組件的相關(guān)資料，文中介紹的非常詳細(xì)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起看看吧。
2017-05-05
Angular中的ActivatedRoute和Router原理解釋
這篇文章主要為大家介紹了Angular中的ActivatedRoute和Router原理解釋?zhuān)行枰呐笥芽梢越梃b參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-04-04