In Angularjs reference to two-way data binding, you will certainly think of ng-model instructions.
First, Ng-model
The Ng-model directive is used to bind input, select, textarea, or custom form controls to properties in the scope that contains them. It binds the value of an operation expression in the current scope to a given element. If the property does not exist, it is implicitly created and added to the current scope.
Always use Ng-model to bind a property in the previous data model of scope, rather than a property on scope, which avoids the occurrence of attribute overrides in the scope or descendant scope!
<input type= "text" ng-model= "Modelname.someprototype"/>
Second, type= "Radio"
By specifying the corresponding value in the selected state with the Value property, and by Ng-model the type= of the radio box with the property in the $scope, the bidirectional dynamic binding of the radio is realized.
<input type= "Radio" name= "Sex" value= "male" ng-model= "person.sex"/> Male <input type= "Radio" name= "Sex" Value= "female" ng-model= "Person.sex"/> Female
Third, type= "checkbox"
By Angularjs's built-in instructions Ng-true-value and Ng-false-value, you specify a value for the multiple-selection box in the checked and unchecked state, and then by Ng-model it corresponds to an attribute in the $scope, the Type= checkbox is implemented. "is a 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"/> Soccer <input type= "checkbox" Ng-true-value= "true" Ng-false-value= "false" ng-model= "Person.like.basketball"/> Basketball
Iv. Complete Example
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>radio & checkbox</title>
<script type="text/javascript" src="angular.js/1.4.4/angular.min.js"></script>
</head>
<body>
<input type="radio" name="sex" value="male" ng-model="person.sex" />男
<input type="radio" name="sex" value="female" ng-model="person.sex" />女
<input type="text" ng-model="person.sex" />
<input type="checkbox" ng-true-value="true" ng-false-value="false" ng-model="person.like.pingpong" />乒乓球
<input type="checkbox" ng-true-value="true" ng-false-value="false" ng-model="person.like.football" />足球
<input type="checkbox" ng-true-value="true" ng-false-value="false" ng-model="person.like.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,
basketball: false
}
};
});
</script>
The above is about Angularjs single box and multiple selection of boxes to achieve two-way dynamic binding of the relevant introduction, I hope to help you learn.
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
