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