<!DOCTYPE html>
<html lang="en" ng-app> <!-- ng-app:初始化的指令 也可以解析局部-->
<meta charset="UTF-8">
<title>Document</title>
<script src='angular.min.js'></script>
<script type="text/javascript">
function Aaa($scope){
$scope.apple = { //M:Model 数据
money : 100,
num : 5,
fre : 10,
};
$scope.sum = function(){
return $scope.apple.money*$scope.apple.num;
}
$scope.$watch('sum()',function(newVal,oldVal){ //监听函数
$scope.apple.fre = newVal>=100 ? 0:10;
})
};
</script>
</head>
<body>
<div ng-controller="Aaa"> <!-- C:Controller 控制器：链接数据和视图的一个桥梁-->
<p>单价：<input type="text" ng-model='apple.money' /></p> <!-- 将输入框的内容和数据绑定在一起 这是MVVM数据双向绑定中的VM(视图影响数据) -->
<p>数量：<input type="text" ng-model='apple.num' /></p>
<p>运费：<span>{{apple.fre | currency:'￥'}}</span></p> <!-- V:View 视图-->
<p>总价：<span>{{sum() + apple.fre | currency:'￥'}}</span></p>
</div>
</body>
</html>