Home >Web Front-end >JS Tutorial >AngularJS radio button and multi-select box realize two-way dynamic binding_AngularJS

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

WBOYOriginal: 2016-05-16 15:20:041466browse

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

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

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

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>

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.

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to implement input password box prompt information in js (with html5 implementation method)_javascript skillsNext article：How to implement input password box prompt information in js (with html5 implementation method)_javascript skills

See more

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

Related articles