1 <!--Angular JS Complete Example -2 <DOCTYPEHTML>3 <HTML>4 <Head>5 <MetaCharSet= "Utf-8"/>6 <title>A complete example experiment</title>7 <Scriptsrc= "Jquery-1.10.2.min.js"></Script>8 <Scriptsrc= "Https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></Script>9 </Head>Ten <Body> One <DivNg-controller= "Boxctrl"> A <Divstyle= "width:100px;height:100px;background-color:red;"Ng-click= "click ()"></Div> - <P>{{w}}*{{h}}</P> - <P>W:<inputtype= "text"Ng-model= "W"></P> the <P>H:<inputtype= "text"Ng-model= "H"></P> - </Div> - - <Scripttype= "Text/javascript"Chartset= "Utf-8"> + varBoxctrl=function($scope, $element) { - //$element is a jquery object + vare=$element. Children (). EQ (0); A $scope. W=e.width (); at $scope. h=e.height (); - $scope. Click=function(){ - $scope. W=parseint ($scope. W)+Ten; - $scope. h=parseint ($scope. h)+Ten; - } - $scope. $watch ('W',function(to,from) { in E.width (to); - } to ); + $scope. $watch ('h',function(to,from) { - E.height (to); the }); * } $ Angular.bootstrap (document.documentelement);Panax Notoginseng </Script> - the </Body> + </HTML>
Achieve effect: Implement the input width and high value in the input box below, the upper div size is updated dynamically at any time
Reference Source: Http://www.zouyesheng.com/angular.html#toc3 Thanks to the author for sharing
Getting Started with Angularjs 2-a complete example