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

AngularJS Basic Tutorial

AngularJS Events

AngularJS has its own HTML event directives.

ng-click command

ng-click The directive defines the AngularJS click event.

AngularJS Example

!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">Click me!</button>
<p>{{　count　}}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl',　function($scope)　{
　　　　$scope.count　=　0;
});
</script>
</body>
</html>
Test and See ‹/›

Hide HTML elements

ng-hide The directive is used to set whether a part of the application is visible.

ng-hide="true" Set the visibility of HTML elements to be invisible.

ng-hide="false" Set the visibility of HTML elements.

AngularJS Example

!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()">hide/Show</button>
<p ng-hide="myVar">
First Name: <input type=text ng-model="firstName"><br>
Last Name: <input type=text ng-model="lastName"><br><br>
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>
</body>
</html>
Test and See ‹/›

Application Parsing:

Part 1 personControllersimilar to the controller section.

The application has a default property: $scope.myVar = false;

ng-hide The directive sets the visibility of the <p> element and two input fields myVar the value (true or false) to set visibility.

toggle() The function is used to switch myVar with the value of a variable (true and false).

ng-hide="true" Let the element Invisible.

to display HTML elements

ng-show The directive can be used to set whether a part of the applicationVisible .

ng-show="false" You can set the visibility of HTML elementsInvisible.

ng-show="true" to set the visibility of HTML elements.

The following example uses ng-show directive:

AngularJS Example

!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()">hide/Show</button>
<p ng-show="myVar">
First Name: <input type=text ng-model="person.firstName"><br>
Last Name: <input type=text ng-model="person.lastName"><br><br>
Name: {{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>
Test and See ‹/›
AngularJS Reference ManualAngularJS Select (Selection Box)