快捷導(dǎo)航

angularjs實(shí)現(xiàn)的購(gòu)物金額計(jì)算工具示例

更新時(shí)間：2018年05月08日 08:44:53 作者：Web攻城獅

這篇文章主要介紹了angularjs實(shí)現(xiàn)的購(gòu)物金額計(jì)算工具,涉及AngularJS事件監(jiān)聽(tīng)、數(shù)值計(jì)算相關(guān)操作技巧,需要的朋友可以參考下

本文實(shí)例講述了angularjs實(shí)現(xiàn)的購(gòu)物金額計(jì)算工具。分享給大家供大家參考，具體如下：

當(dāng)我們用js或者jquery進(jìn)行購(gòu)物車金額計(jì)算的時(shí)候會(huì)非常麻煩,今天,我們用angularjs一種新的方法進(jìn)行購(gòu)物車總額的計(jì)算.代碼如下:

<!DOCTYPE html>
<html ng-app>
<head>
  <meta charset="UTF-8">
  <title>www.dbjr.com.cn 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)容感興趣的讀者可查看本站專題：《AngularJS指令操作技巧總結(jié)》、《AngularJS入門與進(jìn)階教程》及《AngularJS MVC架構(gòu)總結(jié)》

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

您可能感興趣的文章:

相關(guān)文章

AngularJS HTML編譯器介紹
這篇文章主要介紹了AngularJS HTML編譯器介紹,AngularJS的HTML編譯器能讓瀏覽器識(shí)別新的HTML語(yǔ)法。它能讓你將行為關(guān)聯(lián)到HTML元素或者屬性上，甚至能讓你創(chuàng)造具有自定義行為的新元素,需要的朋友可以參考下
2014-12-12
如何用DevUI搭建自己的Angular組件庫(kù)
DevUI 是一款面向企業(yè)中后臺(tái)產(chǎn)品的開源前端解決方案，它倡導(dǎo)沉浸、靈活、至簡(jiǎn)的設(shè)計(jì)價(jià)值觀，提倡設(shè)計(jì)者為真實(shí)的需求服務(wù)，為多數(shù)人的設(shè)計(jì)，拒絕嘩眾取寵、取悅眼球的設(shè)計(jì)。如果你正在開發(fā) ToB 的工具類產(chǎn)品，DevUI 將是一個(gè)很不錯(cuò)的選擇！
2021-05-05
AngularJS過(guò)濾器filter用法實(shí)例分析
這篇文章主要介紹了AngularJS過(guò)濾器filter用法,結(jié)合實(shí)例形式分析了過(guò)濾器filter的定義與使用技巧,需要的朋友可以參考下
2016-11-11
angularjs 源碼解析之scope
$scope 的使用貫穿整個(gè) Angular App 應(yīng)用,它與數(shù)據(jù)模型相關(guān)聯(lián),同時(shí)也是表達(dá)式執(zhí)行的上下文.有了 $scope 就在視圖和控制器之間建立了一個(gè)通道,基于作用域視圖在修改數(shù)據(jù)時(shí)會(huì)立刻更新 $scope,同樣的 $scope 發(fā)生改變時(shí)也會(huì)立刻重新渲染視圖.
2016-08-08
解決angularjs WdatePicker ng-model的問(wèn)題
今天小編就為大家分享一篇解決angularjs WdatePicker ng-model的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-09-09
使用angularjs創(chuàng)建簡(jiǎn)單表格
AngularJS提供豐富填寫表單和驗(yàn)證。我們可以用ng-click來(lái)處理AngularJS點(diǎn)擊按鈕事件，然后使用 $dirty 和 $invalid標(biāo)志做驗(yàn)證的方式。使用novalidate表單聲明禁止任何瀏覽器特定的驗(yàn)證。下面我們來(lái)看看如何使用angularjs創(chuàng)建簡(jiǎn)單表格
2016-01-01
AngularJS數(shù)據(jù)源的多種獲取方式匯總
在AngularJS中獲取數(shù)據(jù)源的方式有很多種，本文給大家整理幾種獲取數(shù)據(jù)源的方式，對(duì)angularjs獲取數(shù)據(jù)源的方式相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧
2016-02-02
AngularJS教程之簡(jiǎn)單應(yīng)用程序示例
本文主要介紹AngularJS簡(jiǎn)單應(yīng)用程序,這里提供了詳細(xì)的流程和代碼程序，有需要的小伙伴可以參考下
2016-08-08
使用AngularJS創(chuàng)建自定義的過(guò)濾器的方法
這篇文章主要介紹了使用AngularJS創(chuàng)建自定義的過(guò)濾器的方法,AngularJS是非常熱門的JavaScript庫(kù),需要的朋友可以參考下
2015-06-06
深入理解Angular.JS中的Scope繼承
這篇文章主要給大家深入的介紹了關(guān)于Angular.JS中Scope繼承的相關(guān)資料，Angular。JS中scope之間的繼承關(guān)系使用JavaScript的原型繼承方式實(shí)現(xiàn)，文中介紹的非常詳細(xì)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起看看吧。
2017-06-06