Home > Developer > Web Develop
In Angularjs the two-way data binding, you will certainly think of ng-model instructions.
First, Ng-modelThe Ng-model directive is used to bind input, select, textarea, or custom form controls to the properties in the scope in which they are contained. It binds the value of an operation expression in the current scope to the given element. If the property does not exist, it is implicitly created and added to the current scope.
Always use Ng-model to bind sCoPeonaanumberaccordingdietypeinsideof theGenusSex,andNois a Properties on scope, which avoids property overrides in scope or descendant scopes!
Second, type= "Radio"type="text" ng-model="modelName.somePrototype" />
By specifying the value in the selected state with the Value property, and by Ng-model the radio box to the property in the $scope, the two-way dynamic binding type= "Radio" is implemented.
Third, type= "checkbox"type="radio" name="sex"value="male" ng-model="person.sex"type="radio" name="sex"value="female" ng-model="person.sex" />女
By using the Angularjs's built-in directives ng-true-value and Ng-false-value, you specify the value of the multi-box in the selected and unchecked states, and then ng-model it to correspond to the attributes in the $scope, you implement the Type= checkbox "For two-way dynamic binding.
<input Type="checkbox"ng-true-value="true"ng-false-value="false"Ng-model="Person.like.pingpong"/> Table Tennis <input Type="checkbox"ng-true-value="true"ng-false-value="false"Ng-model="Person.like.football"/> Football <input Type="checkbox"ng-true-value="true"ng-false-value="false"Ng-model="Person.like.basketball"/> Basketball<! DOCTYPE html><html ng-app="myApp"><head> <meta charset="UTF-8"> <title>Radio & checkbox</title> <script type="text/javascript" src="http://cdn.bootcss.com/ Angular.js/1.4.4/angular.min.js "></script></head><body> <input type="Radio" name= "sex" value="Male" Ng-model="Person.sex" />Man<input type="Radio" name="Sex" value= "female" Ng-model="Person.sex" />Woman<input type="text" ng-model="Person.sex" /> <input type="checkbox" ng-true-value="true" Ng-false-value="false" ng-model="Person.like.pingpong" />Table tennis<input type="checkbox" ng-true-value="true" Ng-false-value="false" ng-model="Person.like.football" />Football<input type="checkbox" ng-true-value="true" Ng-false-value="false" ng-model="Person.like.basketball" />Basketball<span>{{ person.like.pingpong }} {{ person.like.football }} {{ person.like.basketball }} </span></body></html><script type="Text/javascript"> var app = Angular.module (' myApp ', []); App.run (function($rootScope) { $rootScope. person = {sex: "female", Like: {pingpong: true, Football: true, Basketba LL: false }}; }); </script>[Reprint please indicate source: http://blog.csdn.net/ligang2585116]
Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced. Reprint please indicate source: http://blog.csdn.net/ligang2585116!
Angularjs single box and multi-box for two-way dynamic 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
