AngularJS Événements

AngularJS possède ses propres directives d'événements HTML.

Directive ng-click

ng-clickLa directive définit les événements de clic AngularJS.

Exemple AngularJS

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

<button ng-click="count = count + 1">Cliquez-moi !</button>

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

</div>

Essayez-le vous-même »

Masquer les éléments HTML

ng-hideLa directive est utilisée pour définir si une partie de l'application est visible.

ng-hide="true"Rend les éléments HTML invisibles.

ng-hide="false"Rend les éléments HTML visibles.

Exemple AngularJS

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

<button ng-click="toggle()">Masquer/Afficher</button>

<p ng-hide="myVar">
Nom :<input type="text" ng-model="firstName"><br>
Nom complet :<input type="text" ng-model="lastName"><br>
<br>
Nom complet : {{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>

Essayez-le vous-même »

Explication de l'application :

Partie 1personControllerSimilaire au chapitre sur le contrôleur.

L'application a une propriété par défaut :$scope.myVar = false;

ng-hideLa directive définit si l'élément <p> et les deux champs de saisie sont visibles, selonmyVarla valeur (true ou false) pour définir la visibilité.

toggle()La fonction est utilisée pour basculermyVarla valeur de la variable (true et false).

ng-hide="true"Rendre l'élémentinvisible。

Afficher les éléments HTML

ng-showLa directive peut être utilisée pour définir si une partie de l'application estvisible 。

ng-show="false"Vous pouvez rendre des éléments HTMLinvisibles。

ng-show="true"Vous pouvez rendre des éléments HTML visibles.

L'exemple suivant utilise la directive ng-show :

Exemple AngularJS

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

<button ng-click="toggle()">Masquer/Afficher</button>

<p ng-show="myVar">
Prénom :<input type="text" ng-model="firstName"><br>
Nom :<input type="text" ng-model="lastName"><br>
<br>
Nom complet :{{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>

Essayez-le vous-même »
Autres extensions