angularjs實(shí)現(xiàn)的購(gòu)物金額計(jì)算工具示例
本文實(shí)例講述了angularjs實(shí)現(xiàn)的購(gòu)物金額計(jì)算工具。分享給大家供大家參考，具體如下：
當(dāng)我們用js或者jquery進(jìn)行購(gòu)物車(chē)金額計(jì)算的時(shí)候會(huì)非常麻煩,今天,我們用angularjs一種新的方法進(jìn)行購(gòu)物車(chē)總額的計(jì)算.代碼如下:
<!DOCTYPE html>
<html ng-app>
<head>
<meta charset="UTF-8">
<title>www.fzitv.net angular購(gòu)物金額計(jì)算器</title>
</head>
<body ng-controller="sum">
價(jià)格:<input type="text" ng-model="cup.price">
<br/><br/>
數(shù)量:<input type="text" ng-model="cup.count">
<p>運(yùn)費(fèi):{{cup.fee|currency:"¥"}}</p>
<p>總金額:{{all()|currency:"¥"}}</p><!-- 過(guò)濾器currency -->
</body>
<script src="angular.min.js"></script>
<script>
// 購(gòu)物金額計(jì)算
function sum($scope){
$scope.cup={
"price":12,
"count":1,
"fee":20
}
$scope.all=function(){
return $scope.cup.price*$scope.cup.count;
}
// $watch
// 監(jiān)聽(tīng)變化
// 有三個(gè)參數(shù)
// 1.函數(shù)或?qū)傩?
// 2.callback
// 3.true深度監(jiān)聽(tīng)
$scope.$watch("all()",function(nval, oval){
//console.log(nval+":"+oval);
if(nval<100){
$scope.cup.fee=20;
}
else{
$scope.cup.fee=0;
}
},true)
$scope.$watch("cup.count",function(nval, oval){
//console.log(nval+":"+oval);
if(nval<1){
$scope.cup.fee=0;
}
},true)
}
</script>
<script>
</script>
</html>
運(yù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ì)有所幫助。
- Angularjs 雙向綁定時(shí)字符串的轉(zhuǎn)換成數(shù)字類(lèi)型的問(wèn)題
- Angularjs中的驗(yàn)證input輸入框只能輸入數(shù)字和小數(shù)點(diǎn)的寫(xiě)法（推薦）
- angularjs實(shí)現(xiàn)猜數(shù)字大小功能
- AngularJS實(shí)現(xiàn)的生成隨機(jī)數(shù)與猜數(shù)字大小功能示例
- Angular限制input框輸入金額（是小數(shù)的話只保留兩位小數(shù)點(diǎn)）
- AngularJS實(shí)現(xiàn)的根據(jù)數(shù)量與單價(jià)計(jì)算總價(jià)功能示例
- Angular實(shí)現(xiàn)可刪除并計(jì)算總金額的購(gòu)物車(chē)功能示例
- Angular實(shí)現(xiàn)購(gòu)物車(chē)計(jì)算示例代碼
- angular 實(shí)現(xiàn)的輸入框數(shù)字千分位及保留幾位小數(shù)點(diǎn)功能示例
相關(guān)文章
AngularJs解決跨域問(wèn)題案例詳解(簡(jiǎn)單方法)
本文通過(guò)一個(gè)案例給大家介紹angularJs解決跨域問(wèn)題，非常具有參考借鑒價(jià)值，感興趣的朋友一起學(xué)習(xí)吧2016-05-05
詳解封裝基礎(chǔ)的angular4的request請(qǐng)求方法
這篇文章主要介紹了詳解封裝基礎(chǔ)的angular4的request請(qǐng)求方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-06-06
angular安裝import?echarts?from‘echarts‘標(biāo)紅報(bào)錯(cuò)解決
這篇文章主要介紹了angular安裝import?echarts?from‘echarts‘標(biāo)紅報(bào)錯(cuò)解決,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-10-10
動(dòng)手寫(xiě)一個(gè)angular版本的Message組件的方法
本篇文章主要介紹了動(dòng)手寫(xiě)一個(gè)angular版本的Message組件的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-12-12
Angular 1.x個(gè)人使用的經(jīng)驗(yàn)小結(jié)
這篇文章主要給大家介紹了關(guān)于Angular 1.x個(gè)人使用的一些經(jīng)驗(yàn)，屬于一些基礎(chǔ)入門(mén)教程，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起看看吧。2017-07-07
Angular4學(xué)習(xí)教程之HTML屬性綁定的方法
這篇文章主要給大家介紹了關(guān)于Angular4學(xué)習(xí)教程之HTML屬性綁定的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2018-01-01
這篇文章主要介紹了AngularJS 表達(dá)式，這里整理了詳細(xì)的資料，有需要的小伙伴可以參考下2016-09-09
本文主要介紹AngularJS HTML DOM基礎(chǔ)知識(shí)，這里整理了相關(guān)資料和示例代碼進(jìn)行詳解，有需要的小伙伴可以參考下2016-08-08
今天小編就為大家分享一篇Angular4 Select選擇改變事件的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-10-10
本篇文章詳細(xì)的介紹了AngularJS表單和輸入驗(yàn)證實(shí)例， AngularJS表單可以提供驗(yàn)證功能。有需要的可以了解一下。2016-11-11