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

Tutoriel de base AngularJS

AngularJS 事件

AngularJS a ses propres instructions d'événements HTML.

ng-commande click

ng-click Les directives définissent les événements de clic AngularJS.

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

Cacher les éléments HTML

ng-hide Les directives sont utilisées pour définir si une partie de l'application est visible.

ng-hide="true" Définir la non-visibilité des éléments HTML.

ng-hide="false" Définir la visibilité des éléments HTML.

Exemple 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">
<bouton　ng-cliquez="toggle()">cacher/显示</button>
<p　ng-hide="myVar">
名:　<input　type=text　ng-model="firstName"><br>
姓:　<input　type=text　ng-model="lastName"><br><br>
Nom :　{{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>
测试看看 ‹/›

Analyse de l'application :

Première partie personControllercomme dans la section Contrôleur.

L'application a une propriété par défaut : $scope.myVar = false;

ng-hide Les directives définissent les éléments <p> et deux champs de saisie pour la visibilité, en fonction de myVar la valeur (true ou false) pour définir s'il est visible ou non.

toggle() La fonction est utilisée pour basculer myVar la valeur de la variable (true et false).

ng-hide="true" permettent à l'élément invisible.

afficher les éléments HTML

ng-show Les directives peuvent être utilisées pour définir si une partie de l'applicationvisible .

ng-show="false" Les éléments HTML peuvent être définisinvisible.

ng-show="true" peuvent rendre les éléments HTML visibles.

Les exemples suivants utilisent ng-Directive show :

Exemple 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">
<bouton　ng-cliquez="toggle()">cacher/显示</button>
<p　ng-show="myVar">
名:　<input　type=text　ng-model="person.firstName"><br>
姓:　<input　type=text　ng-model="person.lastName"><br><br>
姓名:　{{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>
测试看看 ‹/›
AngularJS 参考手册AngularJS Select(选择框)