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

Tutorial di base AngularJS

事件AngularJS

AngularJS ha le proprie istruzioni di eventi HTML.

Istruzione ng-click

ng-click L'istruzione di comando definisce l'evento di clic AngularJS.

Esempio 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="myCtrl">
<button　ng-click="count　=　count　+　1">Premi!</button>
<p>{{　count　}}</p>
</div>
<script>
var　app　=　angular.module('myApp',　[]);
app.controller('myCtrl',　function($scope)　{}}
　　　　$scope.count　=　0;
});
</script>
</body>
</html>
测试看看 ‹/›

nascondere gli elementi HTML

ng-hide l'istruzione viene utilizzata per impostare se una parte dell'applicazione è visibile.

ng-hide="true" impostare la visibilità degli elementi HTML non visibili.

ng-hide="false" impostare la visibilità degli elementi HTML.

Esempio 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()">nascondi/mostra</button>
<p　ng-hide="myVar">
Nome:　<input　type=text　ng-model="firstName"><br>
Cognome:　<input　type=text　ng-model="lastName"><br><br>
Nome:　{{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>
</body>
</html>
测试看看 ‹/›

analisi dell'applicazione:

prima parte personControllersimile alla sezione del controller.

l'applicazione ha un attributo predefinito: $scope.myVar = false;

ng-hide l'istruzione imposta la visibilità degli elementi <p> e due campi di input, in base a myVar il valore (true o false) per impostare la visibilità.

toggle() la funzione utilizzata per commutare myVar valore della variabile (true e false).

ng-hide="true" rende l'elemento Invisibile。

mostra gli elementi HTML

ng-show l'istruzione può essere utilizzata per impostare se una parte dell'applicazioneVisibile 。

ng-show="false" può impostare la visibilità degli elementi HTMLInvisibile。

ng-show="true" può impostare la visibilità degli elementi HTML.

I seguenti esempi utilizzano l'istruzione ng-show:

Esempio 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()">nascondi/mostra</button>
<p　ng-show="myVar">
Nome:　<input　type=text　ng-model="person.nome"><br>
Cognome:　<input　type=text　ng-model="person.cognome"><br><br>
Nome:　{{person.nome　+　"　"　+　person.cognome}}
</p>
</div>
<script>
var　app　=　angular.module('myApp',　[]);
app.controller('personCtrl',　function($scope)　{
　　　　$scope.person　=　{
　　　　　　　　nome:　"John",
　　　　　　　　cognome:　"Doe"
　　　　};
　　　　$scope.myVar　=　true;
　　　　$scope.toggle　=　function()　{
　　　　　　　　$scope.myVar　=　!$scope.myVar;
　　　　};
});
</script>
</body>
</html>
测试看看 ‹/›
参考手册AngularJS选择框SelectAngularJS