AngularJS -Ereignisse
AngularJS hat eine eigene HTML -Event -Richtlinie.
NG-Klick-Befehl
Die NG-Klick-Anweisung definiert das AngularJS-Klickereignis.
AngularJS -Instanz
<! DocType html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js" ng-controller = "myctrl"> <button ng-klick = "count = count + 1"> klicken Sie auf mich! </button> <p> {{count}} </p> </div> <script> var app = angular.module ('myapp', []); app.controller ('myctrl', function ($ scope) {$ scope.count = 0;}); </script> </body> </html>Laufeffekt:
0
HTML -Elemente verbergen
Die NG-Hide-Anweisung wird verwendet, um festzustellen, ob der Anwendungsteil sichtbar ist.
ng-hide = "true" setzt, dass das HTML-Element unsichtbar ist.
ng-hide = "false" setzt das HTML-Element so sichtbar.
AngularJS -Instanz
<! DocType html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js" ng-controller = "personctrl"> <button ng-klick = "toggle ()"> ausblenden/show </button> <p ng-hide = "myvar"> name: <Eingabe type = text ng-model = "firstname"> <br> Name: <input type LastName}} </p> </div> <script> var app = angular.module ('myapp', []); app.controller ('personctrl', function ($ scope) {$ scope.firstname = "John"; $ scope.myvar =! $ scope.myvar;}}); </script> </body> </htmlAuslaufergebnisse:
Name:
Nachname:
Name: John Doe
Anwendungsanalyse:
Der erste Teil des Personcontroller ähnelt dem Controller -Kapitel.
Die Anwendung hat eine Standardeigenschaft: $ scope.myvar = false;
Die NG-Hide-Anweisung legt fest, ob das <p> -Element und die beiden Eingangsfelder sichtbar sind, und legt fest, ob es gemäß dem Wert von myvar (wahr oder falsch) sichtbar ist.
Die Funktion Toggle () wird verwendet, um die Werte der MyVAR -Variablen (True und False) zu wechseln.
ng-hide = "true" macht das Element unsichtbar.
HTML -Elemente anzeigen
Die NG-Show-Anweisung kann verwendet werden, um festzustellen, ob ein Teil der Anwendung sichtbar ist.
ng-show = "false" kann HTML-Elemente unsichtbar festlegen.
ng-show = "true" kann so eingestellt werden, dass sie für HTML-Elemente sichtbar sind.
Das folgende Beispiel verwendet die NG-Show-Direktive:
AngularJS -Instanz
<! DocType html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js" ng-controller = "personctrl"> <button ng-klick = "toggle ()"> hide/show </button> <p ng-show = "myvar"> name: <Eingabe type = text ng-model = "person.firstname"> <br> name: <Eingabe type = Text ng-model " + person.lastName}} </p> </div> <script> var app = angular.module ('myapp', []); App.Controller ('personctrl', function ($ scope) {$ scope.person = {erstername:" John ", Lastname:" $ "$" $ scope.myvar $ scope.myvar =! $ scope.myvar;Auslaufergebnisse:
Name:
Nachname:
Name: John Doe
Das obige ist eine Zusammenstellung von AngularJS -Ereignisinformationen. Wir werden es später weiter hinzufügen. Als Referenz durch Freunde in Not.