AngularJS Veranstaltung
AngularJS HTML Ereignis hat seine eigene Anweisung.
ng-Klick-Befehl
ng-Click - Richtlinie definiert AngularJS Ereignis klicken.
AngularJS Beispiele
<Taste ng-Klick = "count = count + 1"> Zeigen Sie mir! </ Button>
<P> {{count}} </ p>
</ Div>
Versuchen »
Ausblenden HTML-Elemente
ng-hide Richtlinie legt Anwendungsteil sichtbar ist.
ng-hide = "true" Einrichten der HTML - Elemente sind nicht sichtbar.
ng-hide = "false" Einrichten der HTML - Element sichtbar ist .
AngularJS Beispiele
<Taste ng-Klick = "Toggle ()" >> Hide / Show </ button>
<P ng-hide = "myVar ">
Name: <input type = "text" ng-Modell = "firstname"> <br>
Name: <input type = "text" ng-Modell = "nachName"> <br>
<Br>
Vollständiger Name: {{firstname + " " + nachName}}
</ P>
</ Div>
<Script>
var app = angular.module ( 'myApp', []);
app.controller ( 'personCtrl', function ($ scope) {
$ Scope.firstName = "John",
$ Scope.lastName = "Doe"
$ Scope.myVar = false;
$ Scope.toggle = function () {
! $ Scope.myVar = $ scope.myVar;
};
});
</ Script>
Versuchen »
Anwendungsanalyse:
Der erste Teil personController Controller Schnitt ähnlich.
Anwendung verfügt über eine Standard - Attribut: $ scope.myVar = false;
ng-hide Befehlssätze <p> Element und zwei Eingabefelder sichtbar sind, je nach dem Wert von myVar (wahr oder falsch) Satz sichtbar ist .
Toggle () Funktion wird verwendet , um den Wert von myVar Variable (wahr und falsch) zu wechseln.
ng-hide = "true" , so dass das Element nicht sichtbar ist.
Anzeigen von HTML-Elemente
ng-Show - Befehl kann , ob die Anwendung Teil des sichtbaren eingestellt werden.
ng-show = "false" können Sie HTML - Elemente gesetzt sind nicht sichtbar.
ng-show = "true" kann so eingestellt das HTML - Element sichtbar ist.
Das folgende Beispiel verwendet ng-show-Befehl:
AngularJS Beispiele
<Taste ng-Klick = "Toggle ()"> Hide / Show </ button>
<P ng-show = "myVar ">
Name: <input type = "text" ng-Modell = "firstname"> <br>
Name: <input type = "text" ng-Modell = "nachName"> <br>
<Br>
Name: {{firstname + "" + nachName}}
</ P>
</ Div>
<Script>
var app = angular.module ( 'myApp', []);
app.controller ( 'personCtrl', function ($ scope) {
$ Scope.firstName = "John",
$ Scope.lastName = "Doe"
$ Scope.myVar = true;
$ Scope.toggle = function () {
! $ Scope.myVar = $ scope.myVar;
}
});
</ Script>
Versuchen »