Comment utiliser « ng-model » dans AngularJS avec des EXEMPLES

Par : James Hartmann James Hartmann
Hours Le kit de préparation mis à jour

⚡ Résumé intelligent

ng-model dans AngularJS lie un contrôle d'entrée directement à une propriété de $scope, keeping La vue et le modèle sont synchronisés dans les deux sens. Les sections suivantes abordent l'attribut, trois exemples concrets et les erreurs les plus fréquentes chez les débutants.

  • 🔗 Reliure à double sens : ng-model transfère les entrées de l'utilisateur dans la propriété $scope et renvoie automatiquement les modifications du contrôleur dans le contrôle.
  • 📝 Liaison de zone de texte : Liez une chaîne multiligne à une zone de texte et utilisez la séquence d'échappement \n pour forcer les sauts de ligne dans la valeur rendue.
  • ☑️ État de la case à cocher : Une case à cocher liée avec ng-model stocke une valeur booléenne ; la valeur « true » indique que la case est cochée et la valeur « false » qu’elle est décochée.
  • 📋 Listes déroulantes : Remplissez un élément select avec ng-options et liez l'élément choisi à une propriété de modèle distincte.
  • ⚠️ Panne courante : Lier un élément select au même objet qui fournit son texte d'option écrase cet objet lors de la première sélection.
  • ️ Points d'accroche pour la validation : ng-model ajoute des classes ng-pristine, ng-dirty, ng-valid et ng-invalid qui pilotent le style conditionnel et les vérifications de formulaire.
En savoir plus

Qu’est-ce que ng-model dans AngularJS ?

ng-model est une directive AngularJS qui représente le modèle et dont le but principal est de lier la vue au modèle. Tout ce que l'utilisateur saisit dans un champ est directement enregistré dans une propriété du modèle. $scopeet tout ce que le contrôleur écrit dans cette propriété est directement renvoyé au contrôle.

Par exemple, supposons que vous souhaitiez présenter à l'utilisateur une page simple comme celle ci-dessous, lui demandant de saisir son prénom et son nom dans des champs de texte. Vous souhaitez ensuite vous assurer de stocker les informations saisies par l'utilisateur dans votre modèle de données.

Vous pouvez utiliser la directive ng-model pour associer les champs texte « Prénom » et « Nom » à votre modèle de données. Cette directive garantit la synchronisation permanente des données entre la vue et le modèle, sans nécessiter la moindre ligne de code de gestion d'événements.

⚠️ Note de version : AngularJS (branche 1.x) a atteint sa fin de vie le 31 décembre 2021 et ne reçoit plus de correctifs de sécurité. Les exemples ci-dessous fonctionnent toujours, mais dans les versions modernes d'Angular, la même liaison bidirectionnelle s'écrit comme suit : [(ngModel)] et nécessite le FormsModule.

L'attribut ng-model

Comme indiqué dans la section précédente, l'attribut ng-model est utilisé pour lier les données de votre modèle à la vue présentée à l'utilisateur.

L'attribut ng-model est utilisé pour,

  1. Lier les contrôles tels que les éléments de saisie, de zone de texte et de sélection de la vue au modèle.
  2. Fournir un comportement de validation — par exemple, une validation peut être ajoutée à une zone de texte afin que seuls les caractères numériques puissent y être saisis.
  3. Maintien de l'état du contrôle. Par état, nous entendons que le contrôle et les données sont toujours synchronisés : si la valeur des données change, la valeur du contrôle change automatiquement, et inversement.
  4. Exposer cet état sous forme de classes CSS. AngularJS ajoute ng-pristine, ng-dirty, ng-valid et ng-invalid à chaque contrôle comportant un ng-model, ce qui simplifie la mise en forme conditionnelle des formulaires.

Une fois cet attribut compris, l'étape suivante consiste à l'appliquer aux trois types de contrôles que vous rencontrerez le plus souvent.

Comment utiliser ng-modèle

1) Zone de texte

La balise de zone de texte est utilisée pour définir un contrôle de saisie de texte multiligne. La zone de texte peut contenir un nombre illimité de caractères et le texte s'affiche dans une police à largeur fixe.

Voyons maintenant un exemple simple d'ajout de la directive ng-model à un contrôle de zone de texte. Cet exemple illustre comment transmettre une chaîne multiligne du contrôleur à la vue et l'associer au contrôle de zone de texte.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
    <script src="https://code.angularjs.org/1.8.3/angular.js"></script>
</head>
<body>
<h1>Guru99 Global Event</h1>

<div ng-app="DemoApp" ng-controller="DemoCtrl">
    <form>
        Topic Description:<br><br>
        <textarea rows="4" cols="50" ng-model="pDescription"></textarea>
    </form>
</div>

<script>
    var app = angular.module('DemoApp', []);
    app.controller('DemoCtrl', function($scope) {
        $scope.pDescription = "This topic looks at how Angular JS works \nModels in Angular JS";
    });
</script>
</body>
</html>

Code Explication:

  1. Le directive du modèle ng attache la variable membre appelée « p »Descript« ion » au contrôle « textarea ». Le « pDescriptLa variable « ion » contient le texte transmis au contrôle de zone de texte. rows="4" et cols="50" Les attributs permettent simplement de dimensionner le contrôle afin que le texte multiligne s'affiche correctement.
  2. La variable membre « p »Descript« ion » se voit attribuer une valeur multiligne. \n La séquence d'échappement à l'intérieur de la chaîne est ce qui force le texte à passer à la ligne suivante lors de l'affichage dans la zone de texte.

Sortie :

D'après le résultat, il est clair que le texte multiligne attribué dans le contrôleur s'affiche dans la zone de texte, divisé en deux lignes exactement à l'endroit où \n s'assied.

ARTICLES LIÉS

2) Éléments d'entrée

La directive ng-model fonctionne également avec les éléments d'entrée classiques. Ci-dessous, nous lions simultanément une zone de texte et deux cases à cocher, afin de montrer comment ng-model gère une valeur de type chaîne de caractères et une valeur booléenne côte à côte.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
    <script src="https://code.angularjs.org/1.8.3/angular.js"></script>
</head>
<body>
<h1>Guru99 Global Event</h1>

<div ng-app="DemoApp" ng-controller="DemoCtrl">
    <form>
        Topic Description:<br><br>
        Name : <input type="text" ng-model="pname"><br>
        Topic :<br>
        <input type="checkbox" ng-model="Topic.Controller">Controller<br>
        <input type="checkbox" ng-model="Topic.Models">Models
    </form>
</div>

<script>
    var app = angular.module('DemoApp', []);
    app.controller('DemoCtrl', function($scope) {
        $scope.pname = "Guru99";

        $scope.Topic = {
            Controller: true,
            Models: false
        };
    });
</script>
</body>
</html>

Code Explication:

  1. La directive ng-model associe la variable membre « pname » au contrôle de saisie de texte, et les propriétés Topic.Controller et Topic.Models aux deux cases à cocher.
  2. Dans le contrôleur, « pname » se voit attribuer la chaîne «Guru99”, et l’objet « Topic » possède deux membres booléens. Une case à cocher liée avec ng-model lit et écrit toujours un booléen, c’est pourquoi true affiche la case comme cochée et false cela le rend clair.

Sortie :

De la sortie,

  • On constate clairement que la valeur attribuée à la pname la variable est «Guru99 ".
  • Puisque la première valeur limite est trueLa case à cocher « Contrôleur » est cochée. De même, puisque la deuxième valeur est falseLa case à cocher « Modèles » n’est pas cochée.

3) Sélectionnez un élément dans la liste déroulante

La directive ng-model peut également être appliquée à l'élément select, afin que l'élément choisi par l'utilisateur soit stocké dans le modèle.

Nous aurons ici un champ de saisie de texte qui contiendra le nom «Guru99”, et une liste de sélection avec deux éléments, « Contrôleur » et « Modèles ».

⚠️ Correction : La capture d'écran ci-dessus montre la liste originale, qui liait l'élément select à la même Topics objet ayant fourni le texte de l'option. Dès qu'un utilisateur choisit une option, AngularJS le remplace. Topics La chaîne sélectionnée et les deux options disparaissent. La liste corrigée ci-dessous conserve la liste dans une propriété et la sélection dans une autre, et utilise ng-options pour constituer la liste.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
    <script src="https://code.angularjs.org/1.8.3/angular.js"></script>
</head>
<body>
<h1>Guru99 Global Event</h1>

<div ng-app="DemoApp" ng-controller="DemoCtrl">
    <form>
        Topic Description:<br><br>
        Name : <input type="text" ng-model="pName"><br>
        Topic :<br>
        <!-- Topics holds the list; selectedTopic holds the choice -->
        <select ng-model="selectedTopic" ng-options="t for t in Topics"></select>
    </form>
</div>

<script>
    var app = angular.module('DemoApp', []);
    app.controller('DemoCtrl', function($scope) {
        $scope.pName = "Guru99";

        $scope.Topics = ["Controller", "Models"];
        $scope.selectedTopic = $scope.Topics[0];
    });
</script>
</body>
</html>

Code Explication:

  1. Le champ de saisie de texte est lié à pName, et l'élément select est lié à selectedTopic.Comme la liste déroulante possède sa propre propriété de modèle, le choix d'une option ne perturbe jamais la liste elle-même.
  2. Le Topics Le tableau contient les deux valeurs « Contrôleur » et « Modèles ». ng-options L'expression parcourt ce tableau et affiche une option par entrée ; l'ajout d'un troisième sujet ne nécessite donc aucune modification du balisage.
  3. selectedTopic est préréglé sur la première entrée, ce qui permet à la liste déroulante de s'ouvrir avec une valeur par défaut pertinente au lieu d'une ligne vide.

Sortie :

D'après les résultats, on constate que la valeur attribuée à pName la variable est «Guru99 », et le menu de sélection propose les options « Contrôleur » et « Modèles ». Malgré ces exemples fonctionnels, il arrive que les liaisons refusent de se mettre à jour, et il est important d’en connaître les raisons.

Pourquoi les liaisons ng-model échouent parfois

La plupart des problèmes signalés avec ng-model ne sont pas des bugs d'AngularJS, mais des conséquences du fonctionnement des portées et des primitives.

Le cas classique est celui d'une liaison placée à l'intérieur d'une directive qui crée une portée enfant, comme par exemple : ng-répétition, ng-if ou ng-switch. Écriture ng-model="name" Cela crée une copie fantôme dans la portée enfant, de sorte que le parent ne voit jamais la modification. Liaison à une propriété d'un objet à la place — ng-model="user.name" — permet à chaque portée de pointer vers la même référence. C'est pourquoi les développeurs AngularJS expérimentés insistent sur la présence d'un point dans chaque expression ng-model.

Deux autres causes expliquent la majeure partie du reste :

  • Contrôleur ou module manquant : Si ng-app ou ng-controller est mal orthographié, la liaison ne génère aucun rendu silencieux au lieu de signaler une erreur.
  • Valeur modifiée en dehors d'AngularJS : Une valeur définie par un gestionnaire jQuery ou un rappel setTimeout arrive en dehors du cycle de mise à jour, la vue ne se rafraîchit donc pas avant $scope.$apply() s'exécute.

La vérification de ces trois points résout la grande majorité des problèmes de liaison qui semblent ne pas fonctionner.

FAQ

ng-bind est unidirectionnel : il affiche une valeur du modèle dans un élément. ng-model est bidirectionnel et fonctionne uniquement avec les contrôles de formulaire ; ainsi, les données saisies par l’utilisateur sont transmises au modèle dans les deux sens.

Ajoutez ng-model-options, par exemple ng-model-options="{ debounce: 500 }". AngularJS attendra alors une demi-seconde après la dernière frappe avant de mettre à jour le modèle, ce qui est utile pour les champs de recherche qui déclenchent une requête.

Globalement, oui. Les assistants IA réécrivent ng-model en [(ngModel)] et ajoutent l'importation FormsModule. Les formulaires réactifs, les analyseurs personnalisés et les pipelines $formatters nécessitent toujours une vérification manuelle, car Angular les modélise de manière très différente.

Les outils d'IA vérifient rapidement les causes les plus fréquentes : une primitive liée dans une portée enfant, un nom de contrôleur mal orthographié et une valeur assignée en dehors du cycle de digest. Chacune de ces erreurs génère un échec silencieux plutôt qu'une erreur de console.

Seuls les champs de type « number » sont convertis en valeur numérique. Un champ de type « text » renvoie toujours une chaîne de caractères ; les comparaisons avec l’opérateur « === » échouent donc. Il est nécessaire de convertir explicitement la valeur ou de modifier le type du champ.

Résumez cet article avec :