angular可以做的小功能未完成-优快云博客

本文介绍AngularJS中的两个实用技巧：一是实现网上购物满额减免邮费的功能，包括HTML布局及AngularJS控制器代码；二是利用AngularJS定时器实现时间触发的任务，如提醒宝宝吃饭。

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监听,只要数据到达指定的变化就会更新

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