angularJs小应用----计算购物金额-动态改变邮费

    function A($scope){
          $scope.iphone={    //---------创建iphone对象
          money : 50,   //默认价格
          num : 1,         //默认个数
          fre : 10           //默认邮费
          };
          $scope.sum=function(){    //-------计算费用
              return $scope.iphone.money * $scope.iphone.num;
          };
          $scope.$watch($scope.sum,function(newValue,oldValue){
              //console.log(newValue);//函数sum返回值--改变后的值
              //console.log(oldValue);//函数sum返回值--改变前的值
              $scope.iphone.fre = newValue >= 200 ? 0:10;
          });    
     }

     

 //-----------------------------$watch()：监听函数---------------------------------//

        $watch()两个必选参数，一个可选参数

        //$watch()传入两个参数时，可以监听单值：变量或返回单值的函数

      //参数1为要监听的值，参数2为回调函数,即监听的值发生改变时要执行的函数

         $scope.$watch('iphone.money',function(){ 
              console.log('money改变');           //当iphone.money改变时触发
          });

          $scope.$watch('iphone',function(){
              console.log('对象改变');             //始终触发不到, 因为iphone是对象，不是单值的
          });


          $scope.$watch('iphone',function(){
              console.log('对象改变');          //iphone对象中任意一个成员改变都会触发到
          }, true );            // true：可以监听多值的集合


          $scope.$watch( 'iphone.money', function(newValue,oldValue){
              console.log(newValue);    //输出money改变后的值
              console.log(oldValue);      //输出money改变前的值
          });

 

   <div ng-controller='A' >
      <p> 价格:   <input type='text' ng-model='iphone.money'> </p>
      <p> 个数:   <input type='text' ng-model='iphone.num'> </p>
      <p> 费用:   <span> {{ sum() | currency:'￥' }} </span> </p>       
      <p> 运费:   <span> {{ iphone.fre | currency:'￥' }} </span></p>
      <p> 总额:   <span> {{ sum() + iphone.fre | currency:'￥' }} </span></p> 
   </div>  

过滤器

currency：货币格式化的方法

如：
1. {{ iphone.money * iphone.num | currency }}      -----$50.0
2. {{ iphone.money * iphone.num | currency:'￥' }} -----￥50.0 

    费用小于200时：

 费用大于200时：