Home > Developer > Web Develop
Tag: TPs on () bidirectional auto-positioning page tells document Scope automatic
Material Download Https://github.com/liuch0228/AngularJS-learn.git
1. Using the native jquery implementation to implement the input box content on the page following the input value dynamic update
Project path
1 <!DOCTYPE HTML>2 <HTML>3 <HeadLang= "en">4 <MetaCharSet= "UTF-8">5 <title>Native JS Implementation input box content dynamic display on the page</title>6 </Head>7 <Body>8 <inputtype= "text"/>9 <P>What you have entered is:<span></span></P>Ten <Scripttype= "Text/javascript"src=".. /.. /js/jquery/jquery-1.11.1.js "></Script> One <Scripttype= "Text/javascript"> A $(function () { - //after the document is loaded, execute Document.ready () equals $ (function () {}) Window.onload (): Entire page loaded - $('input'). KeyUp (function () { //$ (' input ') is the jquery property selector, select the INPUT element the //var value = this.value;//Using native Js,this.value - varvalue= $( This). Val (); //$ (This) converts a JS native object to a DOM element, calling the Dom's Val () method - $('span'). HTML (value); - }); + }); - </Script> + </Body> A </HTML>
When the mouse is lifted, get the value of the INPUT element and update it to the Span tab:
2. Use angular JS to complete the same function:
1 <!DOCTYPE HTML>2 <HTML>3 <HeadLang= "en">4 <MetaCharSet= "UTF-8">5 <title></title>6 </Head>7 <Bodyng-app= "">8 <inputtype= "text"ng-model= "Value"/>9 <P>The input content is{{value}}</P>Ten <Scriptsrc=".. /.. /js/angular-1.2.29/angular.js "></Script> One </Body> A </HTML>
Just introduce Angularjs, add ng-app= "" in body to add ng-model= "value" in the input tag, and then write value in {{}} in the P tag to achieve the same effect.
Click the Ng-inspector plugin as shown in:
Ng-app (Directive): tells Angular core it manages the entire area that the current label contains, and automatically creates $rootscope root scope objects. In the code above, Ng-app is in body, which means that it manages the entire area of the body and creates a root-scope object $rootscope
Ng-model: Associates the value of the current input box with (property name: property value) and as a property of the current scope object ($rootScope). In the example above, <input type= "text" ng-model= "value"/> through the ng-model instruction, binds the input value of the current input box to the specified property: value, And as a property of the current scope, the value of this property is the input of the input box. {{}} is an expression of angular JS that displays the data and displays the value corresponding to the specified property name of the scope object.
Next, do 2 small tests:
In the above example, the input tag ng-model= "value" is removed, and then run and input content, the results are as follows, there is only one root scope object, there is no attribute, but not before the deletion is there, indicating that the memory property, is from the Ng-model specified property name, The value of this property is the input of the input box.
The input tag's ng-model= "value" is restored and then the value in {{}} expression is changed to value1 and then run, and you can see in the insert that a property named value with property value "SSS" is displayed in the plugin. But the position of the original expression is not displayed; The value shown in this expression is to angular in memory of this value property, that is, the page input data from the view layer, flow to the angular memory (model), The angular expression is then displayed on the page,
The variable name for this expression must be an in-memory property name, or ng-model the specified property name. Therefore, Ng-model is a two-way data binding directive.
Webstorm Use tips:
, the left project file directory is closed, if you want to see where the currently open files, press Alt+1 to expand the left resource list,
Then click on the Chinese red circle icon, will automatically navigate to the current open file in the directory inside, at this time, if you hold the CTRL + SHIFT + LEFT/right ARROW keys, you will find that the left side of the resource list will change the width, this operation is also applicable to the idea
Angular JS-2-Angularjs HelloWorld
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
