Créer une liste de cases à cocher dans AngularJS

Ce tutoriel montrera comment créer une simple liste de cases à cocher dans AngularJS. Nous utiliserons la directive ng-repeat pour itérer sur un tableau d’objets contenant une propriété appelée selected.

Nous utiliserons également le ng-model pour lier la propriété sélectionnée de chaque objet du tableau à une entrée de case à cocher.

Étapes pour créer une liste de cases à cocher Angular

Les étapes suivantes vous guideront pour créer une liste de cases à cocher Angular.

Discutons d’un exemple qui nous aidera à créer une liste de cases à cocher Angular.

Nous devons configurer un environnement de développement pour commencer à créer des applications Angular. Pour cela, nous allons installer NodeJS et l’outil Angular CLI globalement sur notre système.

Pour ce faire, exécutez la commande suivante.

$ng new angular-checkbox-list-app

Après cela, écrivons les codes JavaScript et HTML.

Code Javascript :

angular.module('sam', ['checklist-model'])
    .controller('demo', function($scope) {
        $scope.countryList = [
            { name: 'America'},
            { name: 'England'},
            { name: 'Canada'},
            { name: 'Scotland'}
        ];
        $scope.selected = {
            country: []
        };
    });

Code HTML:

<div ng-app="sam">
    <div ng-controller="demo">
    <h2>
    Example of Angular Checkbox List
    </h2>
        <label ng-repeat="country in countryList"><input type="checkbox" checklist-model="selected.country" checklist-value="country" /> {{country.name}}<br/> </label>
        <br/>
        <p>
        Selection will show here
        </p>
        {{selected.country}}
	</div>
</div>

Production:

Dans cet exemple, nous avons écrit une liste de quelques pays et utilisé principalement ng-repeat. Il est utilisé pour afficher les données dans le tableau, la liste ou un autre composant de l’interface utilisateur.

De plus, il est facile à utiliser, intuitif et offre de nombreuses personnalisations. Enfin, dans la liste des cases à cocher Angular, vous pouvez facilement ajouter ou supprimer des éléments sans casser tout le code. cela rend une liste flexible pour vos besoins.

Cliquez ici pour vérifier la démonstration en direct du code ci-dessus.