Maison >interface Web >js tutoriel >Le bouton radio AngularJS et la boîte de sélection multiple réalisent une liaison dynamique bidirectionnelle_AngularJS

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

WBOYoriginal: 2016-05-16 15:20:041472parcourir

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

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

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

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>

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.

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment implémenter les informations d'invite de la zone de mot de passe de saisie dans js (avec la méthode d'implémentation html5) _compétences javascriptArticle suivant：Comment implémenter les informations d'invite de la zone de mot de passe de saisie dans js (avec la méthode d'implémentation html5) _compétences javascript

Articles Liés

Voir plus