angular.js学习笔记:实现商品价格计算实例
<!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>