Maison > interface Web > js tutoriel > Comment lier efficacement les valeurs des cases à cocher aux listes dans AngularJS ?

Comment lier efficacement les valeurs des cases à cocher aux listes dans AngularJS ?

Mary-Kate Olsen
Libérer: 2024-11-24 00:22:11
original
678 Les gens l'ont consulté

How to Effectively Bind Checkbox Values to Lists in AngularJS?

Liaison à des listes de valeurs de case à cocher avec AngularJS

Pour lier des valeurs de case à cocher à une liste dans un contrôleur AngularJS, vous pouvez exploiter deux approches distinctes :

Utiliser un tableau simple

Dans cette approche, le balisage HTML ressemble à :

<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 correspondant gère la liaison :

app.controller('SimpleArrayCtrl', ['$scope', function SimpleArrayCtrl($scope) {
  // Fruits: ['apple', 'orange', 'pear', 'naartjie']
  $scope.fruits = ...;

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

  // Toggle selection by fruit name
  $scope.toggleSelection = function toggleSelection(fruitName) {
    // ... code to manage selection ...
  };
}]);
Copier après la connexion

Avantages :

  • Structure de données simple
  • Basculement facile par fruit name

Inconvénients :

  • Opérations d'ajout/suppression fastidieuses dues à la gestion de plusieurs listes

Utilisation d'un objet Tableau

Vous pouvez également utiliser un tableau d'objets pour l'entrée data :

<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

La logique du contrôleur reste la suivante :

app.controller('ObjectArrayCtrl', ['$scope', 'filterFilter', function ObjectArrayCtrl($scope, filterFilter) {
  // Fruits: [{ name: 'apple', selected: true }, ...]
  $scope.fruits = ...;

  // Selected fruits: [/* fruit names */]
  $scope.selection = ...;

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

  // Watch `fruits` for changes
  $scope.$watch('fruits|filter:{selected:true}', function (nv) {
    // ... code to update `$scope.selection` ...
  }, true);
}]);
Copier après la connexion

Avantages :

  • Ajout/suppression facilité opérations

Inconvénients :

  • Structure de données plus complexe
  • Basculement fastidieux par nom (nécessite des méthodes d'assistance)

Comparaison

Chaque solution offre ses avantages et ses inconvénients, donc la sélection de la meilleure approche dépend des exigences spécifiques de votre application.

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!

source:php.cn
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