Maison > interface Web > js tutoriel > Comment lier des cases à cocher AngularJS à une liste de valeurs ?

Comment lier des cases à cocher AngularJS à une liste de valeurs ?

Linda Hamilton
Libérer: 2024-11-24 17:33:14
original
568 Les gens l'ont consulté

How to Bind AngularJS Checkboxes to a List of Values?

Liaison des cases à cocher AngularJS à la liste de valeurs

Problème :

Dans AngularJS, une liste de cases à cocher est présentée et l'objectif est d'établir une liaison entre eux et une liste dans le contrôleur. Chaque case cochée indique l'inclusion de sa valeur associée dans la liste.

Solution :

AngularJS propose deux solutions viables à ce problème :

< ;h3>1. Tableau simple comme données d'entrée

Dans cette approche, la structure HTML imite la liste de cases à cocher :

<label ng-repeat="fruitName in fruits">
  <input
    type="checkbox"
    name="selectedFruits[]"
    value="{{fruitName}}"
    ng-checked="selection.indexOf(fruitName) > -1"
    ng-click="toggleSelection(fruitName)"
  > {{fruitName}}
</label>
Copier après la connexion

Le code du contrôleur qui l'accompagne gère l'interaction :

app.controller('SimpleArrayCtrl', ['$scope', function SimpleArrayCtrl($scope) {

  // Fruits
  $scope.fruits = ['apple', 'orange', 'pear', 'naartjie'];

  // Selected fruits
  $scope.selection = ['apple', 'pear'];

  // Toggle selection for a given fruit by name
  $scope.toggleSelection = function toggleSelection(fruitName) {
    var idx = $scope.selection.indexOf(fruitName);

    if (idx > -1) {
      $scope.selection.splice(idx, 1);
    } else {
      $scope.selection.push(fruitName);
    }
  };
}]);
Copier après la connexion

2. Tableau d'objets comme données d'entrée

L'utilisation d'un tableau d'objets comme données d'entrée ajoute une complexité supplémentaire mais simplifie les opérations d'insertion et de suppression :

<label ng-repeat="fruit in fruits">
  <input
    type="checkbox"
    name="selectedFruits[]"
    value="{{fruit.name}}"
    ng-model="fruit.selected"
  > {{fruit.name}}
</label>
Copier après la connexion

Le code du contrôleur reflète le changement :

app.controller('ObjectArrayCtrl', ['$scope', 'filterFilter', function ObjectArrayCtrl($scope, filterFilter) {

  // Fruits
  $scope.fruits = [
    { name: 'apple',    selected: true },
    { name: 'orange',   selected: false },
    { name: 'pear',     selected: true },
    { name: 'naartjie', selected: false }
  ];

  // Selected fruits
  $scope.selection = [];

  // Helper method to get selected fruits
  $scope.selectedFruits = function selectedFruits() {
    return filterFilter($scope.fruits, { selected: true });
  };

  $scope.$watch('fruits|filter:{selected:true}', function (nv) {
    $scope.selection = nv.map(function (fruit) {
      return fruit.name;
    });
  }, true);
}]);
Copier après la connexion

Avantages et Inconvénients :

  • Tableau simple :

    • Structure de données facile
    • Basculement facile par nom
    • Cependant, une insertion fastidieuse et suppression
  • Tableau d'objets :

    • Structure de données plus complexe
    • Les bascules par nom nécessitent des méthodes d'assistance
    • Cependant, l'insertion et la suppression sont très simple

Démo : http://jsbin.com/ImAqUC/1/

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration de ce site Web
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
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal