Comment créer une liste stockant les valeurs pour plusieurs cases à cocher avec AngularJS ?

Les cases à cocher peuvent être gérées sous forme de listes de valeurs grâce à AngularJS. Le but de cette méthode est de gérer une liste qui changera en fonction des cases cochées par l'utilisateur.

Les cases à cocher peuvent être gérées sous forme de listes de valeurs grâce au framework AngularJS. Le but de cette méthode est de gérer une liste qui changera en fonction des cases cochées par l'utilisateur. Il existe 2 possibilités : créer un tableau simple dans lequel on stocke ces données ou alors utiliser un tableau contenant des objets pour chaque case cochée. Chaque méthode a ses avantages et ses inconvénients.

La première méthode utilise 2 tableaux, un tableau contenant les valeurs possibles et un tableau contenant les valeurs sélectionnées. Dans la vue, utilisez une balise <label> avec l'attribut ng-repeat pour parcourir le tableau des valeurs possibles. Dans la checkbox, utilisez un test avec la méthode indexOf pour déterminer si la case est cochée (attribut ng-checked). On appelle la méthode modifierSelection du controleur sur le clic (attribut ng-click).

<label ng-repeat=choix in tableauChoix>
<input type=checkbox name=elementsChoisis[] value={} ng-checked=selection.indexOf(choix) > -1 ng-click=modifierSelection(choix)> {}
</label>

Dans le contrôleur, vous devez instancier les deux listes qui gèrent les cases à cocher et créer la méthode modifierSelection() :

app.controller('controleurAvecTableauSimple', ['$scope', function controleurAvecTableauSimple($scope) {
// choix possibles
$scope.tableauChoix = ['choix 1', 'choix 2', 'choix 3'];
// elements choisis
$scope.selection = ['choix 2'];
// Méthode pour modifier la sélection en fonction de la case cochée
$scope.modifierSelection = function modifierSelection(choix) {
var index = $scope.selection.indexOf(choix);
// S'il est déjà dans la sélection, on l'enlève
if (index > -1) {
$scope.selection.splice(index, 1);
}
// Sinon, on l'ajoute
else {
$scope.selection.push(choix);
}
};
}]);

La structure avec deux tableaux simples permet de créer facilement une méthode pour modifier la sélection. Il est en revanche plus difficile de gérer l'ajout et la suppression d'un élément, car il y a deux tableaux.

La seconde méthode possède un code HTML similaire. Il faut juste remplacer les attributs ng-checked et ng-click par l'attribut ng-model. Cet attribut va relier les cases à cocher au contrôleur qui pourra surveiller les changements et modifier les éléments sélectionnés en fonction des cases cochées. On utilise l'attribut value pour indiquer la valeur si le formulaire est soumis de manière traditionnelle par un clic sur un bouton de validation ou l'appui de la touche Entrée.

<label ng-repeat=choix in tableauChoix> 
<input type=checkbox name=elementsChoisis[] value={{choix.nom}} ng-model=choix.selectionne> {{choix.nom}}
</label>

Dans le contrôleur, on instancie les tableaux et on crée une méthode helper pour récupérer les choix de l'utilisateur. On ajoute également la méthode $watch pour que le contrôleur surveille les changements dans les cases à cocher :

app.controller('controleurAvecTableauObjets', ['$scope', 'filterFilter', function controleurAvecTableauObjets($scope, filterFilter) {
// Listes des choix
$scope.tabelauChoix = [
{ nom: 'choix 1', selectionne: true },
{ nom: 'choix 2', selectionne: false },
{ nom: 'choxi 3', selectionne: true }
];
// Eléments choisis par l'utilisateur
$scope.selection = [];
// Méthode helper pour récupérer les choix de l'utilisateur
$scope.elementsChoisis = function elementsChoisis() {
return filterFilter($scope.choix, { selected: true });
};
// On surveille les changements dans les cases à cocher
$scope.$watch('tableauChoix|filter:{selected:true}', function (nv) {
$scope.selection = nv.map(function (choix) {
return choix.nom;
});
}, true);
}]);

Avec cette méthode, l'ajout et la suppression d'un élément se gèrent très facilement, mais la structure des données est plus compliquée. Si l'on souhaite ajouter une fonction sélection en fonction du nom, il faut ajouter une méthode helper.^M

AngularJS