Comment lier efficacement les valeurs des cases à cocher aux listes dans 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>

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 ...
  };
}]);

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>

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);
}]);

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!