evento AngularJS
evento AngularJS HTML tem a sua própria instrução.
ng-click comando
directiva ng-clique define AngularJS clique evento.
AngularJS exemplos
<Button ng-clique = "contagem = count + 1"> Aponte-me! </ Button>
<P> {{count}} </ p>
</ Div>
tente »
Ocultar elementos HTML
ng-hide directiva define parte de aplicação é visível.
ng-hide = "true" Definindo elementos HTML não são visíveis.
ng-hide = "false" Configuração elemento HTML é visível.
AngularJS exemplos
<Button ng clique com o botão = "toggle ()" >> Hide / Show </ button>
<P ng-hide = "myVar ">
Nome: <input type = "text" ng-model = "firstName"> <br>
Nome: <input type = "text" ng-model = "Sobrenome"> <br>
<br>
Nome Completo: {{firstName + " " + lastName}}
</ P>
</ Div>
<Script>
var app = angular.module ( 'myApp', []);
app.controller ( 'personCtrl', function ($ escopo) {
$ Scope.firstName = "John",
$ Scope.lastName = "Doe"
$ Scope.myVar = false;
$ Scope.toggle = function () {
! $ Scope.myVar = $ scope.myVar;
};
});
</ Script>
tente »
Análise de aplicações:
A seção controlador de parte personController primeira similar.
Aplicação tem um atributo padrão: $ scope.myVar = false;
conjuntos de instruções ng-hide <p> elemento e dois campos de entrada são visíveis, dependendo do valor de myVar (verdadeiro ou falso) conjunto é visível.
função de alternância () é usado para mudar o valor de myVar variável (verdadeiro e falso).
ng-hide = "true" para que esse elemento não é visível.
elementos de exibição HTML
ng-show instrução pode ser usada para definir se a porção de aplicação do visível.
ng-show = "false" você pode definir elementos HTML não são visíveis.
ng-show = "true" pode definir o elemento HTML é visível.
O exemplo a seguir usa ng-show comando:
AngularJS exemplos
<Button ng clique com o botão = "toggle ()"> Hide / Show </ button>
<P ng-show = "myVar ">
Nome: <input type = "text" ng-model = "firstName"> <br>
Apelido: <input type = "text" ng-model = "Sobrenome"> <br>
<br>
Nome: {{firstName + "" + lastName}}
</ P>
</ Div>
<Script>
var app = angular.module ( 'myApp', []);
app.controller ( 'personCtrl', function ($ escopo) {
$ Scope.firstName = "John",
$ Scope.lastName = "Doe"
$ Scope.myVar = true;
$ Scope.toggle = function () {
! $ Scope.myVar = $ scope.myVar;
}
});
</ Script>
tente »