Home > Developer > Web Develop
The most typical scenario should belong to the form
Scenarios like forms and tables, presentation and submission are generally present at the same time.
Typically, one-way data binding solves business needs, such as the content of a database is bound to a page in HTML.
However, if you need to design the submission function, two-way data binding will be very convenient.
Bidirectional data binding refers to the model that changes when a text box (or other bound label, control) changes
In that case. The changed model can be submitted immediately without the need for DOM and value operations through tedious jquery
<!DOCTYPE HTML><HTMLNg-app= "Userinfomodule"><Head> <MetaCharSet= "Utf-8"> <Linkhref= "Https://cdn.bootcss.com/bootstrap/3.6.6/css/bootstrap.min.css"rel= "stylesheet"></Head><Body> <Divclass= "Panel Panel-primary"> <Divclass= "Panel-heading"> <Divclass= "Panel-title">Bidirectional data binding</Div> </Div> <Divclass= "Panel-body"> <Divclass= "Row"> <Divclass= "Col-md-12"> <formclass= "Form-horizontal"role= "form"Ng-controller= "Userinfoctrl"> <Divclass= "Form-group"> <labelclass= "Col-md-2 Control-label">Mailbox:</label> <Divclass= "Col-md-10"> <inputtype= "Email"class= "Form-control"placeholder= "126 Mailbox Recommended"Ng-model= "Userinfo.email"> </Div> </Div> <Divclass= "Form-group"> <labelclass= "Col-md-2 Control-label">Password:</label> <Divclass= "Col-md-10"> <inputtype= "Password"class= "Form-control"placeholder= "Only numbers, letters, underscores"Ng-model= "Userinfo.pwd"> </Div> </Div> <Divclass= "Form-group"> <Divclass= "Col-md-offset-2 col-md-10"> <Divclass= "checkbox"> <label> <inputtype= "checkbox"Ng-model= "Userinfo.autologin">Automatic Login</label> </Div> </Div> </Div> <Divclass= "Form-group"> <Divclass= "Col-md-offset-2 col-md-10"> <Buttonclass= "Btn Btn-default"Ng-click= "Getformdata ()">Get the value of a form form</Button> <Buttonclass= "Btn Btn-default"Ng-click= "Setformdata ()">Set the value of a form form</Button> </Div> </Div> </form> </Div> </Div> </Div> </Div> <Scriptsrc= "Https://cdn.bootcss.com/angular.js/1.5.0/angular.min.js"></Script> <Scripttype= "Text/javascript"> varUserinfomodule=Angular.module ('Userinfomodule', []); Userinfomodule.controller ('Userinfoctrl', ["$scope", function($scope) {$scope. UserInfo={email:"[email protected]", pwd:"123456", Autologin:true} $scope. Getformdata= function() {Console.log ($scope. UserInfo); } $scope. Setformdata= function() {$scope. UserInfo={email:"[email protected]", pwd:"123456123456123456123456", Autologin:false } } }]) </Script></Body></HTML>
Angularjs-Why 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
