<!DOCTYPE HTML> <html ng-app> //ng-app是初始化指令，整个页面都会被angularjs解析，写在div或者其他标签上表示只是局部的div和标签里面使用angularjs解析，其余的不用anguarjs解析。 <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <script src="angular.min.js"></script> <script> function Aaa($scope,$timeout){ $scope.name = 'hello'; setTimeout(function(){ $scope.name = 'hi';//setTimeout这个定时器不能刷新name的值 },2000); $timeout(function(){ $scope.name = 'hi';//$timeout是angularjs的定时器才能使name值刷新 },2000); $scope.show = function(){ $scope.name = 'hi'; }; } </script> </head> <body> //ng-controller是控制器 <div ng-controller="Aaa" ng-click="name='hi'"> click函数改变name的值 <div ng-controller="Aaa" ng-click="show()"> 作用同上 <p>{{name}}</p> </div> </body> </html>
<!DOCTYPE HTML> <html ng-app> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <script src="angular.min.js"></script> <script> function Aaa($scope,$timeout){ $scope.name = 'hello'; } </script> </head> <body> <div ng-controller="Aaa"> <input type="text" ng-model="name"> 输入框改变标签p也改变。 <p>{{name}}</p> </div> </body> </html>
<!DOCTYPE HTML> <html ng-app> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <script src="angular.min.js"></script> <script> function Aaa($scope,$timeout){ $scope.iphone = { money : 5, num : 1, fre : 10 }; $scope.sum = function(){ return $scope.iphone.money * $scope.iphone.num; }; /*$scope.$watch('iphone.money',function(newVal,oldVal){ console.log(newVal); console.log(oldVal); },true);*/ $scope.$watch($scope.sum,function(newVal,oldVal){ //$watch监听数据的变化 //console.log(newVal); //console.log(oldVal); $scope.iphone.fre = newVal >= 100 ? 0 : 10; }); } </script> </head> <body> <div ng-controller="Aaa"> <p>价格:<input type="text" ng-model="iphone.money"></p> <p>个数:<input type="text" ng-model="iphone.num"></p> <p>费用:<span>{{ sum() | currency:'￥' }}</span></p> currency是过滤器 <p>运费:<span>{{iphone.fre | currency:'￥'}}</span></p> <p>总额:<span>{{ sum() + iphone.fre | currency:'￥'}}</span></p> </div> </body> </html>