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

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

創(chuàng)新互聯(lián)專業(yè)為企業(yè)提供新泰網(wǎng)站建設(shè)、新泰做網(wǎng)站、新泰網(wǎng)站設(shè)計、新泰網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計與制作、新泰企業(yè)網(wǎng)站模板建站服務(wù)，十余年新泰做網(wǎng)站經(jīng)驗，不只是建網(wǎng)站，更提供有價值的思路和整體網(wǎng)絡(luò)服務(wù)。

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

<!DOCTYPE html>
<html ng-app>
<head>
  <meta charset="UTF-8">
  <title>www.jb51.net 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>

運行效果：

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

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

在線投資理財計算器：
http://tools.jb51.net/jisuanqi/touzilicai_calc

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

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

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

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

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

本文標(biāo)題：angularjs實現(xiàn)的購物金額計算工具示例
文章出自：http://bm7419.com/article44/pcesee.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站制作、品牌網(wǎng)站設(shè)計、軟件開發(fā)、全網(wǎng)營銷推廣、關(guān)鍵詞優(yōu)化、網(wǎng)站維護

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容