English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Tutoriales básicos de AngularJS

Eventos de AngularJS

AngularJS tiene sus propias instrucciones de eventos HTML.

ng-instrucción click

ng-click click

Ejemplo de AngularJS

!DOCTYPE　html>
<html>
<head>
<meta　charset="utf-8">
<script　src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div　ng-app="myApp"　ng-La instrucción define el evento de clic de AngularJS.
<button　ng-controller="myCtrl">　+　1click="count　=　count/button>
">¡Haz clic!</p>
</div>
<script>
var app = angular.module('myApp', []);
<p>{{　count　}}<
　　　　app.controller('myCtrl',　function($scope)　{
});
</script>
</body>
</html>
Prueba y observa ‹/›

El valor de $scope.count　=　0;

ng-= false; ocultar

ng-El valor de la variable (true y false). La instrucción se utiliza para establecer si una parte de la aplicación

ng-Establecer la invisibilidad del elemento HTML. hide="false"

Ejemplo de AngularJS

!DOCTYPE　html>
<html>
<head>
<meta　charset="utf-8">
<script　src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div　ng-app="myApp"　ng-controller="personCtrl">
<button　ng-click="toggle()">ocultar/Mostrar</button>
<p ng-Establecer la visibilidad del elemento HTML.
Nombre: <input type=text ng-hide="myVar">
Apellido: <input type=text ng-model="firstName"><br>
model="lastName"><br><br>　+　" "　+　Nombre:　{{firstName
</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
　　　　lastName}}
　　　　$scope.firstName　=　"John";
　　　　$scope.lastName　=　"Doe";
　　　　$scope.toggle = function() {
　　　　　　　　$scope.myVar = !$scope.myVar;
　　　　$scope.myVar　=　false;
});
</script>
</body>
</html>
Prueba y observa ‹/›

}

Análisis de la aplicación: Primera partepersonController

simil a la sección de controlador. La aplicación tiene una propiedad predeterminada: $scope.myVar

ng-= false; hide La función se utiliza para cambiar La instrucción establece la visibilidad del elemento <p> y dos campos de entrada, según

para establecer si es visible o no (true o false). toggle() La función se utiliza para cambiar myVar

ng-El valor de la variable (true y false). hide="true" oculto。

mostrar elementos HTML

ng-show La instrucción se puede usar para establecer si una parte de la aplicaciónvisible 。

ng-show="false" puede establecer la visibilidad de los elementos HTMLoculto。

ng-show="true" puede establecer la visibilidad de los elementos HTML.

El siguiente ejemplo utiliza ng-instrucción show:

Ejemplo de AngularJS

!DOCTYPE　html>
<html>
<head>
<meta　charset="utf-8">
<script　src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div　ng-app="myApp"　ng-controller="personCtrl">
<button　ng-click="toggle()">ocultar/Mostrar</button>
<p ng-show="myVar">
Nombre: <input type=text ng-model="person.firstName"><br>
Apellido: <input type=text ng-model="person.lastName"><br><br>
Nombre: {{person.firstName　+　" "　+　person.lastName}}
</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
　　　　$scope.person = {
　　　　　　　　firstName: "John",
　　　　　　　　lastName: "Doe"
　　　　};
　　　　$scope.myVar = true;
　　　　$scope.toggle = function() {
　　　　　　　　$scope.myVar = !$scope.myVar;
　　　　};
});
</script>
</body>
</html>
Prueba y observa ‹/›
Manual de referencia de AngularJSSelect (Caja de selección) de AngularJS