Maison > interface Web > js tutoriel > Comment lier plusieurs valeurs de case à cocher à une liste dans AngularJS ?

Comment lier plusieurs valeurs de case à cocher à une liste dans AngularJS ?

Linda Hamilton
Libérer: 2024-11-19 04:21:02
original
667 Les gens l'ont consulté

How to Bind Multiple Checkbox Values to a List in AngularJS?

Comment se lier à une liste de valeurs de cases à cocher dans AngularJS ?

Introduction

Lorsqu'il s'agit d'un ensemble de cases à cocher , il peut être crucial de lier leurs valeurs à une liste dans le contrôleur pour une gestion efficace. Cependant, la propriété ng-model d'AngularJS semble se limiter à lier une seule valeur de case à cocher. Cet article explore deux approches pour résoudre ce problème, en exploitant soit un simple tableau, soit un tableau d'objets comme données d'entrée.

Approche 1 : Simple Tableau

HTML :

<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

Contrôleur :

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

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

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

  // Toggle selection
  $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

Avantages :

  • Données simples structure
  • Basculement facile par nom

Inconvénients :

  • Opérations d'ajout/suppression fastidieuses

Approche 2 : Objet Tableau

HTML :

<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

Contrôleur :

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 for selected fruits
  $scope.selectedFruits = function selectedFruits() {
    return filterFilter($scope.fruits, { selected: true });
  };

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

Avantages :

  • Ajout/suppression facile opérations

Inconvénients :

  • Structure de données plus complexe
  • Basculement fastidieux par nom

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