angular能夠作的小功能 未完成

1,網上購物滿多少減多少

思路:

效果圖,滿500減10元郵費

1,html部分有基本佈局,

<div>
   <h3>化妝品</h3>
   單價 <input type="text" ng-model="good.price"><br>
   數量 <input type="text" ng-model="good.num">
   運費 :{{good.yunfei | currency:'元'}}
   總價: {{sum() | currency:'元'}}

</div>

2,script部分

angular.module('myApp', []).controller('myCtrl', ['$scope', function($scope){
   
   $scope.good = {
      price:100,
      num:1,
      yunfei:10
   }
   //定義一個函數名字爲num
   $scope.num = function(){
      return $scope.good.price*$scope.good.num+$scope.good.yunfei
   }

   //監聽 總金額 目的是爲了判斷
   $scope.$watch('$scope.sun', function(newV, oldV) {
      
      if (newV>=500) {
         $scope.good.yunfei= 0;
      }else{
         $scope.good.yunfei= 10;
      }
   });


}])

-------------------------------------------------------------------------------------------------------------------------------------------------

2,angular中的定時器

根據時間走,時間走到12現實寶寶要吃飯
<p>{{state}}</p>
<p>時間:{{time}}</p> 

script部分

angular.module('myApp', []).controller('myCtrl', ['$scope', '$interval',function($scope,$interval){

   $scope.state = "寶寶在睡覺"
   $scope.time = 6;

    // 12點的時候顯示 寶寶吃飯
   $scope.timer = $interval(function(){
      $scope.time++

   //     if ($scope.time == 12) {
   //        $scope.state = "寶寶要吃飯"
      // }
   },1000);


   $scope.$watch('time',function(newValue,oldValue){

      if (newValue ==12) {
         //中止定時器
         $scope.state = "寶寶要吃飯了"
         // angular中關閉定時器的方法
         $interval.cancel($scope.timer);
      }
   })

}])

用$scope.$watch監聽,只要數據到達指定的變化就會更新----------------------------------------------------------------------