AngularJS radio button and multi-select box realize two-way dynamic binding

AngularJS radio button and multi-select box realize two-way dynamic binding_AngularJS

WBOY

Release： 2016-05-16 15:20:04

Original

1423 people have browsed it

When it comes to two-way data binding in AngularJS, everyone will definitely think of the ng-model directive.

1. 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 the 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 properties within a data model on the scope instead of properties on the scope. This can avoid property overrides in the scope or descendant scopes!

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

Copy after login

2. type=”radio”

Specify the corresponding value in the selected state through the value attribute, and use ng-model to map the radio button to the attribute in $scope, thereby realizing two-way dynamic binding when type="radio".

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

Copy after login

3. type="checkbox"

Use AngularJS’s built-in instructions ng-true-value and ng-false-value to specify the corresponding values of the multi-select box in the selected and unselected states, and then use ng-model to correspond to the attributes in $scope. This realizes the two-way dynamic binding of type="checkbox".

<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" />篮球

Copy after login

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" />男
  <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>

Copy after login

The above is the relevant introduction to the two-way dynamic binding of AngularJS radio button and multi-select box. I hope it will be helpful to everyone's learning.