Créer une liste de cases à cocher dans AngularJS

Muhammad Adil 11 décembre 2023
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.

  • Créez un nouveau projet AngularJS.
  • Ajouter des données au contrôleur.
  • Ajoutez des éléments de liste au contrôleur et ajoutez la directive ng-repeat.
  • Ajouter une liste de cases à cocher au fichier HTML et ajouter la directive ng-model.
  • Créez une fonction qui parcourt les éléments d’un contrôleur et vérifie s’ils sont cochés ou non, puis affichez-les ou masquez-les en conséquence.

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:

Liste de cases à cocher simples Angular

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.

Muhammad Adil avatar Muhammad Adil avatar

Muhammad Adil is a seasoned programmer and writer who has experience in various fields. He has been programming for over 5 years and have always loved the thrill of solving complex problems. He has skilled in PHP, Python, C++, Java, JavaScript, Ruby on Rails, AngularJS, ReactJS, HTML5 and CSS3. He enjoys putting his experience and knowledge into words.

Facebook

Article connexe - Angular List