AngularJS Ereignisse

AngularJS hat eigene HTML-Ereignis-Direktiven.

ng-click-Direktive

ng-clickDie Direktive definiert AngularJS-Klickereignisse.

AngularJS-Beispiel

<div ng-app="" ng-controller="myCtrl">

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

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

</div>

Selbst ausprobieren »

HTML-Elemente ausblenden

ng-hideDie Direktive wird verwendet, um festzulegen, ob ein Teil der Anwendung sichtbar ist.

ng-hide="true"HTML-Elemente unsichtbar machen.

ng-hide="false"HTML-Elemente sichtbar machen.

AngularJS-Beispiel

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

<button ng-click="toggle()">Ausblenden/Anzeigen</button>

<p ng-hide="myVar">
Name:<input type="text" ng-model="firstName"><br>
Vollständiger Name:<input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}
</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>

Selbst ausprobieren »

Erklärung der Anwendung:

Teil 1personControllerÄhnlich wie im Controller-Kapitel.

Die Anwendung hat eine Standardeigenschaft:$scope.myVar = false;

ng-hideDie Direktive legt fest, ob das <p>-Element und die beiden Eingabefelder sichtbar sind, abhängig vonmyVardem Wert (true oder false), um die Sichtbarkeit festzulegen.

toggle()Die Funktion wird verwendet, ummyVarden Wert der Variable (true und false) umzuschalten.

ng-hide="true"Das Elementunsichtbar machen。

HTML-Elemente anzeigen

ng-showDie Direktive kann verwendet werden, um festzulegen, ob ein Teil der Anwendungsichtbar ist 。

ng-show="false"Sie können HTML-Elementeunsichtbar machen。

ng-show="true"Sie können HTML-Elemente so einstellen, dass sie sichtbar sind.

Das folgende Beispiel verwendet die ng-show-Direktive:

AngularJS-Beispiel

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

<button ng-click="toggle()">Ausblenden/Anzeigen</button>

<p ng-show="myVar">
Vorname:<input type="text" ng-model="firstName"><br>
Nachname:<input type="text" ng-model="lastName"><br>
<br>
Vollständiger Name:{{firstName + " " + lastName}}
</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>

Selbst ausprobieren »
Weitere Erweiterungen