溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

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

發(fā)布時(shí)間：2020-09-28 05:21:49 來源：腳本之家 閱讀：138 作者：Web攻城獅 欄目：web開發(fā)

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

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

<!DOCTYPE html>
<html ng-app>
<head>
  <meta charset="UTF-8">
  <title>www.jb51.net angular購物金額計(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><!-- 過濾器currency -->
</body>
<script src="angular.min.js"></script>
<script>
  // 購物金額計(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)聽變化
    // 有三個(gè)參數(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>

運(yùn)行效果：

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

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

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

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

科學(xué)計(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é)》

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

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手