Comment définir un événement de clic dans AngularJS ? Introduction détaillée aux événements AngularJS

Cet article présente principalement l'analyse détaillée des événements de angularjs, ainsi que des exemples de la directive ng-click d'angularjs, et enfin l'analyse des éléments HTML cachés. Jetons un coup d'œil ensemble à cet article

AngularJS Événements

AngularJS a sa propre instruction d'événements HTML.

directive ng-click

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

Instance AngularJS

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

< bouton ng-click="compte = compter + 1">Cliquez sur moi !</bouton>

<p>{{ compter }}</p>

</p>

Masquer l'élément HTML La directive

ng-hide est utilisée pour définir si la partie application est visible.

ng-hide="true" Définit l'élément HTML pour qu'il soit invisible.

ng-hide="false" Définit l'élément HTML pour qu'il soit visible.

AngularJS 实例

<p ng-app="myApp" ng- contrôleur="personCtrl">

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

<p ng-hide="myVar">
名 : <input type="text" ng-model=" prénom"><br>
姓名 : <input type="text" ng-model="lastName"> <br>
<br>
Nom complet : {{firstName + " " + lastName}}
</p>

</p>

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

Analyse de l'application :

La première partie personController est similaire au chapitre sur le contrôleur.

L'application a un attribut par défaut : $scope.myVar = false;

ng-hide définit l'élément

2 Le fait que le champ de saisie soit visible ou non est défini en fonction de la valeur (vrai ou faux) de myVar. La fonction

toggle() est utilisée pour changer la valeur (vrai et faux) de la variable myVar.

ng-hide="true" Rend l'élément invisible. La directive

Show HTML element

ng-show peut être utilisée pour définir si une partie de l'application est visible.

ng-show="false" peut définir l'élément HTML invisible.

ng-show="true" peut définir les éléments HTML pour qu'ils soient visibles.

Les exemples suivants utilisent la directive ng-show :

Exemples AngularJS

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

<bouton ng-click="basculer ()">隐藏/显示</bouton>

<p ng-show="myVar">
名 : <input type="text" ng-model="firstName"> <br>
姓 : <entrée type ="text" ng-model="lastName"><br>
<br>
姓名 : {{firstName + " " + nom}}
</p>

</p>

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

Cet article se termine ici (si vous voulez en voir plus, rendez-vous sur le site PHP chinoisApprenez du manuel d'utilisation d'AngularJS). Si vous avez des questions, vous pouvez laisser un message ci-dessous.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!