AngularJS Eventos

AngularJS tiene sus propias directivas de eventos HTML.

Directiva ng-click

ng-clickLa directiva define el evento de clic de AngularJS.

Ejemplo de AngularJS

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

<button ng-click="count = count + 1">¡Haz clic en mí!</button>

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

</div>

Pruébalo »

Ocultar elementos HTML

ng-hideLa directiva se utiliza para establecer si una parte de la aplicación es visible.

ng-hide="true"Establecer que el elemento HTML sea invisible.

ng-hide="false"Establecer que el elemento HTML sea visible.

Ejemplo de AngularJS

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

<button ng-click="toggle()">Ocultar/Mostrar</button>

<p ng-hide="myVar">
Nombre:<input type="text" ng-model="firstName"><br>
Nombre completo:<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>

Pruébalo »

Análisis de la aplicación:

Primera partepersonControllerSimilar al capítulo de controladores.

La aplicación tiene una propiedad predeterminada:$scope.myVar = false;

ng-hideLa directiva establece si el elemento <p> y los dos campos de entrada son visibles, segúnmyVardel valor (true o false) para establecer la visibilidad.

toggle()La función se utiliza para alternarmyVarel valor de la variable (true y false).

ng-hide="true"Hacer que el elementosea invisible。

Mostrar elementos HTML

ng-showLa directiva se puede usar para establecer si una parte de la aplicación esvisible 。

ng-show="false"Puede establecer que un elemento HTML seainvisible。

ng-show="true"Puede establecer que un elemento HTML sea visible.

El siguiente ejemplo usa la directiva ng-show:

Ejemplo de AngularJS

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

<button ng-click="toggle()">Ocultar/Mostrar</button>

<p ng-show="myVar">
Nombre:<input type="text" ng-model="firstName"><br>
Apellido:<input type="text" ng-model="lastName"><br>
<br>
Nombre completo:{{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>

Pruébalo »
Otras extensiones