Latest web development tutorials

AngularJS directive ng-modèle

ng-modèle instruction est utilisé pour lier les données d'application au contrôleur de valeur HTML (entrée, sélectionnez, textarea) de.


directive ng-modèle

ng-model directive peut entrer des valeurs variables et AngularJS domaine créé reliures.

AngularJS exemples

<Div ng-app = "myApp ng-contrôleur" = "myCtrl">
Nom: <input ng-model = " name">
</ Div>

<Script>
var app = angular.module ( 'myApp', []);
app.controller ( 'myCtrl', function ($ portée) {
$ Scope.name = "John Doe";
});
</ Script>

Essayez »

Way liaison

liaison bidirectionnelle, lorsque vous modifiez la valeur du champ de saisie, la valeur de la propriété sera également critique AngularJS:

AngularJS exemples

<Div ng-app = "myApp ng-contrôleur" = "myCtrl">
Nom: <input ng-model = " name">
<H1> vous entrez: {{name}} </ h1>
</ Div>

Essayez »

Valider l'entrée utilisateur

AngularJS exemples

<Form ng-app = "" name = "myForm">
Email:
<Input type = "email" name = "MyAddress" ng-model = "text">
<Span ng-show = "myForm.myAddress . $ Error.email"> est pas une adresse e - mail valide </ span>
</ Form>

Essayez »

L'exemple ci - dessus, le message dans le ng-show propriété renvoie true cas d'affichage.


Etat d'application

ng-model directive apporte de la valeur d'état (invalide, sale, touché, erreur ) pour les données d'application:

AngularJS exemples

<Form ng-app = "" name = "myForm" ng-init = "myText = '[email protected]'">
Email:
<Input type = "email" name = ng-modèle "MyAddress" = "myText" nécessaire> </ p>
<H1> Statut </ h1>
{{MyForm.myAddress. $ Valide}}
{{MyForm.myAddress. $ Sale}}
{{MyForm.myAddress. $ Touché}}
</ Form>

Essayez »

classe CSS

ng-model instruction sur la base de leurs états fournissent des classes CSS pour les éléments HTML:

AngularJS exemples

<Style>
input.ng-invalid {
background-color: lightblue;
}
</ Style>
<Body>

<Form ng-app = "" name = "myForm">
Entrez votre nom:
<Input name = "MyAddress" ng -modèle = "text" requis>
</ Form>

Essayez »

ng-model instruction sur la base du champ de formulaire d'état pour ajouter / supprimer les catégories suivantes:

  • ng-vide
  • ng-not-vide
  • ng-touché
  • ng-épargnée
  • ng valide
  • ng-invalide
  • ng-sale
  • ng pendante
  • ng-vierge