événement AngularJS
événement AngularJS HTML possède sa propre instruction.
ng-clic commande
ng-clic directive définit AngularJS cliquez sur événement.
AngularJS exemples
<Bouton ng-cliquez sur = "count = count + 1"> Dirigez - moi! </ Button>
<P> {{count}} </ p>
</ Div>
Essayez »
Masquer les éléments HTML
directive ng-hide fixe partie d' application est visible.
ng-hide = "true" éléments de réglage HTML ne sont pas visibles.
ng-hide = élément "false" Réglage HTML est visible.
AngularJS exemples
<Bouton ng-cliquez sur = "toggle ()" >> Masquer / Afficher le bouton </>
<P ng-hide = "myVar ">
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 ($ portée) {
$ Scope.firstName = "John",
$ Scope.lastName = "Doe"
$ Scope.myVar = false;
$ Scope.toggle = function () {
! $ Scope.myVar = $ scope.myVar;
};
});
</ Script>
Essayez »
Analyse d'application:
La première section du contrôleur partie personController similaire.
Demande a un attribut par défaut: $ scope.myVar = false;
ng-masquer les jeux d'instructions <p> champs d'éléments et deux entrées sont visibles, en fonction de la valeur de myVar (vrai ou faux) ensemble est visible.
fonction toggle () est utilisée pour changer la valeur de la variable myVar (vrai et faux).
ng-hide = "true" de telle sorte que l' élément ne soit pas visible.
éléments d'affichage HTML
ng-show instruction peut être utilisée pour définir si la partie d'application du visible.
ng-show = vous pouvez définir des éléments HTML «faux» ne sont pas visibles.
ng-show = "true" peut régler l'élément HTML est visible.
L'exemple suivant utilise ng-show commande:
AngularJS exemples
<Bouton ng-cliquez sur = "toggle ()"> Masquer / Afficher le bouton </>
<P ng-show = "myVar ">
Nom: <input type = "text" ng-model = "firstName"> <br>
Nom: <input type = "text" ng-model = "lastName"> <br>
<Br>
Nom: {{firstName + "" + lastName}}
</ P>
</ Div>
<Script>
var app = angular.module ( 'myApp', []);
app.controller ( 'personCtrl', function ($ portée) {
$ Scope.firstName = "John",
$ Scope.lastName = "Doe"
$ Scope.myVar = true;
$ Scope.toggle = function () {
! $ Scope.myVar = $ scope.myVar;
}
});
</ Script>
Essayez »