首页 > 代码库 > AngularJS入门2-一个完整的例子
AngularJS入门2-一个完整的例子
1 <!-- angular JS 完整的例子 --> 2 <DOCTYPE html> 3 <html> 4 <head> 5 <meta charset="utf-8"/> 6 <title>一个完整例子实验</title> 7 <script src="jquery-1.10.2.min.js"></script> 8 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script> 9 </head>10 <body>11 <div ng-controller="BoxCtrl">12 <div style="width:100px;height:100px;background-color:red;" ng-click="click()"></div>13 <p>{{w}}*{{h}}</p>14 <p>w:<input type="text" ng-model="w"></p>15 <p>h:<input type="text" ng-model="h"></p>16 </div>17 18 <script type="text/javascript" chartset="utf-8">19 var BoxCtrl=function($scope,$element){20 //$element是一个jquery对象21 var e=$element.children().eq(0);22 $scope.w=e.width();23 $scope.h=e.height();24 $scope.click=function(){25 $scope.w=parseInt($scope.w)+10;26 $scope.h=parseInt($scope.h)+10;27 }28 $scope.$watch(‘w‘,function(to,from) {29 e.width(to);30 } 31 );32 $scope.$watch(‘h‘,function(to,from){33 e.height(to); 34 });35 }36 angular.bootstrap(document.documentElement);37 </script>38 39 </body>40 </html>
实现效果:实现在下方输入框中输入宽和高的值，上方div大小随时动态更新
参考来源：http://www.zouyesheng.com/angular.html#toc3 感谢作者的分享
AngularJS入门2-一个完整的例子
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。