Home > Developer > Web Develop
Bidirectional data binding
Direction 1: Model data binding to Views (view)
Implementation method: ①. {{model variable name}}②. Common directives (ng-repeat)
Direction 2: Bind user-entered data in the Views (view) to model data
Implementation method:ng-model directive, used in the form component (input Select)
$watch () To change the value of the Listener model variable, execute the specified method
$watch (' variable name ', function () {...});
A very simple chestnut:
Get real-time input from input box, print in console
1 <!DOCTYPE HTML>2 <HTMLNg-app= "MYAPP">3 <HeadLang= "en">4 <MetaCharSet= "UTF-8">5 <title>Bidirectional data binding</title>6 <Scriptsrc= "Js/angular.js"></Script>7 </Head>8 <BodyNg-controller= "Myctrl">9 <!--implement two-way data binding by binding the view data to the model through Ng-model and binding the model data to the view in the form of {{}} -Ten <inputtype= "text"Ng-model= "KW"/> One <P>{{KW}}</P> A <Script> - varapp=Angular.module ('myApp',['ng']); - App.controller ('Myctrl', function($scope) { the $scope. $watch ('kw',function(){ - console.log ($scope. kw); - }) - + }); - </Script> + </Body> A </HTML>
ANGULARJS Study notes 4--Four characteristics of two-way data binding
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
