Événements angularjs
AngularJS a sa propre directive d'événements HTML.
commande ng-clic
La directive NG-Click définit l'événement Click AngularJS.
Instance angularjs
<! Doctype html> <html> <éad> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </cript> </ad> <body> <div ng-app = "MyApp" ng-controller = "myctrl"> <bouton ng-click = "count = count + 1"> cliquez sur moi! </ Button> <p> {{count}} </p> </div> <cript> var app = angular.module ('myApp', []); app.Controller ('myctrl', fonction ($ scope) {$ scope.count = 0;}); </cript> </dody> </html>Effet de course:
0
Masquer les éléments HTML
La directive NG-Hide est utilisée pour définir si la pièce de demande est visible.
ng-hide = "true" définit que l'élément HTML est invisible.
ng-hide = "false" définit l'élément HTML à visible.
Instance angularjs
<! Doctype html> <html> <éad> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </cript> </ad> <body> <div ng-app = "MyApp" Ng-Controller = "Personctrl"> <Button ng-Click = "toggle ()"> masquer / afficher </ Button> <p ng-hide = "MyVar"> Name: <Input Type = Text Ng-Model = "FirstName"> <br> Name: <Input Type = Text Ng-model = "LastName"> <br> <br> LastName}} </p> </div> <cript> var app = angular.module ('myApp', []); app.Controller ('personctrl', function ($ scope) {$ scope.firstname = "John"; $ scope.lastname = "Doe"; $ scope.myvar = false; $ scope.toggle = fonction () {) $ scope.myvar =! $ scope.myvar;Résultats en cours:
nom:
nom de famille:
Nom: John Doe
Analyse des applications:
La première partie du PersonController est similaire au chapitre du contrôleur.
L'application a une propriété par défaut: $ scope.myvar = false;
La directive Ng-Hide définit si l'élément <p> et les deux champs d'entrée sont visibles, et définit s'il est visible en fonction de la valeur de MyVar (true ou false).
La fonction toggle () est utilisée pour changer les valeurs de la variable myvar (true et false).
ng-hide = "true" rend l'élément invisible.
Afficher les éléments HTML
La directive NG-spectacle peut être utilisée pour définir si une partie de l'application est visible.
ng-show = "false" peut définir les éléments HTML invisibles.
ng-show = "true" peut être défini pour être visible aux éléments HTML.
L'exemple suivant utilise la directive NG-spectacle:
Instance angularjs
<! Doctype html> <html> <éad> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </cript> </ad> <body> <div ng-app = "MyApp" Ng-Controller = "Personctrl"> <Button ng-Click = "toggle ()"> masquer / afficher </fitton> <p ng-show = "myvar"> name: <intrut type = text ng-model = "Person.firstname"> <br> name: <intrut type = Text Ng-Model = "Person.Lastname"> <br> <br> <br> NAG + "" + Person.lastName}} </p> </div> <script> var app = angular.module ('myApp', []); app.Controller ('Personctrl', fonction ($ scope) {$ scope.person = {FirstName: "John", LastName: "Doe"}; $ Scope.myvar = True; $ SCOPE =}; $ Scope.Myvar = $ scope.myvar =! $ scope.myvar;};}); </cript> </ body> </html>Résultats en cours:
nom:
nom de famille:
Nom: John Doe
Ce qui précède est une compilation d'informations sur l'événement AngularJS. Nous continuerons à l'ajouter plus tard. Pour référence par des amis dans le besoin.