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时：