Of Stack

AngularJS radio and multi checkbox realize two way dynamic binding

  • 2020-12-07 03:58:45
  • OfStack

When you mention bidirectional data binding in AngularJS, you will certainly think of the ES2en-ES3en directive.

1. ng-model

The ES9en-ES10en directive is used to bind input, select, textarea, or custom form controls to properties in the scope that contain them. It binds the value of the operand 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 ES15en-ES16en to bind attributes on the 1 data model on scope instead of scope to avoid overwriting attributes in scope or descendant scope! 


<input type="text" ng-model="modelName.somePrototype" />

2. type radio = ""

The two-way dynamic binding when type= "radio" is realized by specifying the value corresponding to the selected state through ng-ES28en attribute and matching the radio box with the attribute in $scope through ES27en-ES28en. 


<input type="radio" name="sex" value="male" ng-model="person.sex" /> male 
<input type="radio" name="sex" value="female" ng-model="person.sex" /> female

3. type checkbox = ""

The bi-directional dynamic binding of type= "checkbox" can be achieved by specifying the value of multiple checkboxes in checked and unchecked state through AngularJS's built-in instructions ES40en-ES41en-ES42en and ES43en-ES44en-ES45en, and then matching it to the attribute in $scope through ES46en-ES47en. 


<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

4. 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" /> male 
 <input type="radio" name="sex" value="female" ng-model="person.sex" /> female 
 <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,
    basketball: false
   }
  };
 });
</script>

The above is the introduction of AngularJS radio and multi-box to realize two-way dynamic binding. I hope it will be helpful for you to learn.

Related articles: