<!DOCTYPE html>
<html lang="en" ng-app="shopApp">
<head>
<meta charset="UTF-8">
<title>angular购物车小计</title>
<script src="angular.min.js"></script>
<script>
//angular的模块化，模块名是ng-app定义的模块名，ng-app='模块名'是指定从哪个模块开始初始化
var shopApp=angular.module('shopApp',[]);
//angular的写法是shopApp.controller('函数名',function($scope){});，但是这种写法在压缩代码的时候会改变参数$scope,导致angular不识别这个被改变的参数
shopApp.controller('shopCar',['$scope',function($scope){
//在$scope上定义一个变量，使用json来存储需要使用的数据
$scope.phone={
price:1299,
num:1,
fre:5
};
//同样的再$scope上也可以添加求和方法，并返回到需要的数据中,在angular中方法作用域变量会优先找自己作用域中的变量值，如果找不到会一级一级的往上找
$scope.sum=function(){
return $scope.phone.price * $scope.phone.num;
};
//监听运费的实时变化，当购物金额大于5000元的时候免运费，当购物金额小于5000元的时候运费为10元
$scope.$watch($scope.sum,function(newVal,oldVal){
$scope.phone.fre=newVal >=5000 ? 0 : 10 ;
},true);
}]);
</script>
</head>
<body>
<div ng-controller="shopCar">
<p>价格：<input type="text" ng-model="phone.price"></p>
<p>个数：<input type="text" ng-model="phone.num"></p>
<p>商品总价：<span>{{sum() | currency:'￥'}}</span></p>
<p>运费合计：<span>{{phone.fre | currency:'￥'}}</span></p>
<p>总计：<span>{{sum() + phone.fre | currency:'￥'}}</span></p>
</div>
</body>
</html>
