Le bouton radio AngularJS et la boîte de sélection multiple réalisent une liaison dynamique bidirectionnelle

Le bouton radio AngularJS et la boîte de sélection multiple réalisent une liaison dynamique bidirectionnelle_AngularJS

WBOY

Libérer： 2016-05-16 15:20:04

original

1425 Les gens l'ont consulté

En ce qui concerne la liaison de données bidirectionnelle dans AngularJS, tout le monde pensera certainement à la directive ng-model.

1.ng-modèle

La directive

ng-model est utilisée pour lier les contrôles d'entrée, de sélection, de zone de texte ou de formulaire personnalisé aux propriétés dans la portée qui les contient. Il lie la valeur de l'expression d'opération dans la portée actuelle à l'élément donné. Si la propriété n'existe pas, elle est implicitement créée et ajoutée à la portée actuelle.
Utilisez toujours ng-model pour lier les propriétés dans un modèle de données sur la portée au lieu des propriétés sur la portée. Cela peut éviter les remplacements de propriétés dans la portée ou les portées descendantes !

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

Copier après la connexion

2. tapez="radio"

Spécifiez la valeur correspondante dans l'état sélectionné via l'attribut value et utilisez ng-model pour mapper le bouton radio à l'attribut dans $scope, réalisant ainsi une liaison dynamique bidirectionnelle lorsque type="radio".

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

Copier après la connexion

3. tapez="case à cocher"

Utilisez les instructions intégrées d'AngularJS ng-true-value et ng-false-value pour spécifier les valeurs correspondantes de la zone de sélection multiple dans les états sélectionné et non sélectionné, puis utilisez ng-model pour correspondre au attributs dans $scope. Cela réalise la liaison dynamique bidirectionnelle de 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" />篮球

Copier après la connexion

4. Exemple complet

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

Copier après la connexion

Ce qui précède est l'introduction pertinente à la liaison dynamique bidirectionnelle du bouton radio AngularJS et de la boîte de sélection multiple. J'espère que cela sera utile à l'apprentissage de chacun.