Heim  >  Artikel  >  Web-Frontend  >  Wie definiere ich ein Klickereignis in AngularJS? Detaillierte Einführung in AngularJS-Ereignisse

Wie definiere ich ein Klickereignis in AngularJS? Detaillierte Einführung in AngularJS-Ereignisse

寻∝梦
寻∝梦Original
2018-09-08 15:42:282173Durchsuche

In diesem Artikel wird hauptsächlich die detaillierte Analyse der Ereignisse von AngularJS sowie Beispiele für die NG-Click-Direktive von AngularJS und schließlich die Analyse versteckter HTML-Elemente vorgestellt. Schauen wir uns gemeinsam diesen Artikel an


AngularJS Events

AngularJS verfügt über eine eigene HTML-Ereignisanweisung.

ng-click-Direktive

ng-click-Direktive definiert AngularJS-Klickereignisse.


AngularJS-Instanz

<p ng-app="" ng-controller="myStrg">

< button ng-click="count = Anzahl + 1">Klick mich!</Button>

<p>{{ count }}</p>

</p>

HTML-Element ausblenden Mit der Direktive

ng-hide wird eingestellt, ob der Anwendungsteil sichtbar ist.

ng-hide="true" Legt fest, dass das HTML-Element unsichtbar ist.

ng-hide="false" Legt fest, dass das HTML-Element sichtbar ist.


AngularJS 实例

<p ng-app="myApp" ng- controller="personCtrl">

<button ng-click= "toggle()">>隐藏/显示</button>

<p ng-hide="myVar">
名: <input type="text" ng-model=" Vorname"><br>
姓名: <Eingabe type="text" ng-model="lastName"> <br>
<br>
Vollständiger Name: {{firstName + " " + lastName}}
</p>

</p>

<Skript>
var app = angle.module('myApp', []);
app.controller('personCtrl', function($scope) {
    $scope.firstName = „John“,
    $scope.lastName = „Doe“
    $scope.myVar = false;
    $scope.toggle = function() {
$scope.myVar = !$scope.myVar;
};
});
</script>

Anwendungsanalyse:

Der erste Teil personController ähnelt dem Controller-Kapitel.

Die Anwendung hat ein Standardattribut: $scope.myVar = false;

ng-hide-Direktive legt das

-Element fest 2 Ob das Eingabefeld sichtbar ist oder nicht, wird basierend auf dem Wert (wahr oder falsch) von myVar festgelegt. Die Funktion

toggle() wird verwendet, um den Wert (wahr und falsch) der Variablen myVar umzuschalten.

ng-hide="true" Macht das Element unsichtbar. Mit der Direktive

Show HTML element

ng-show kann eingestellt werden, ob ein Teil der Anwendung sichtbar ist.

ng-show="false" kann das HTML-Element unsichtbar setzen.

ng-show="true" kann HTML-Elemente sichtbar machen.

Die folgenden Beispiele verwenden die ng-show-Direktive:

AngularJS-Beispiele

<p ng-app="myApp" ng-controller= "personStrg">

<button ng-click="toggle ()">隐藏/显示</button>

<p ng-show="myVar">
名: <input type="text" ng-model="firstName"> <br>
姓: <Eingabe Typ ="text" ng-model="lastName"><br>
<br>
姓名: {{firstName + " " + Nachname}}
</p>

</p>

<Skript>
var app = angle.module('myApp', []);
app.controller('personCtrl', function($scope) {
    $scope.firstName = "John",
    $scope.lastName = "Doe"
    $scope.myVar = true;
    $scope.toggle = function() {
        $scope.myVar = !$scope.myVar;
    }
});
</script>

Dieser Artikel endet hier (wenn Sie mehr sehen möchten, besuchen Sie die chinesische PHP-WebsiteLernen Sie aus dem AngularJS-Benutzerhandbuch), wenn Sie Fragen haben, können Sie unten eine Nachricht hinterlassen.

Das obige ist der detaillierte Inhalt vonWie definiere ich ein Klickereignis in AngularJS? Detaillierte Einführung in AngularJS-Ereignisse. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn