ANGULARJS Events
Angularjs has its own HTML event directive.
Ng-click directives
The Ng-click directive defines the Angularjs click event.
Angularjs instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<button ng-click="count = count + 1">点我！</button>
<p>{{ count }}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.count = 0;
});
</script>
</body>
</html>
Operation Effect:
Point me!
0
Hide HTML Elements
The ng-hide directive is used to set whether the application section is visible.
ng-hide= ' true ' to set HTML elements invisible.
ng-hide= "False" sets the HTML element to be visible.
Angularjs instance
<! DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<script src = "http://apps.bdimg.com/libs/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>
Run Result:
Hide/Show
Name:
Name:
Name: John Doe
Application resolution:
The first part PersonController similar to the Controller section.
The application has a default property: $scope. MyVar = false;
The ng-hide directive sets <p> elements and two input fields are visible, depending on the value of MyVar (True or false) to set whether it is visible.
The toggle () function toggles the value of the MyVar variable (true and false).
ng-hide= "true" to make the element invisible.
Show HTML elements
The ng-show directive can be used to set whether a part of the application is visible.
ng-show= "false" to set HTML elements invisible.
ng-show= "True" to set the HTML element to be visible.
The following example uses the ng-show directive:
Angularjs instance
<! DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<script src = "http://apps.bdimg.com/libs/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>
Run Result:
Hide/Show
Name:
Name:
Name: John Doe
The above is the Angularjs event data collation, follow-up continue to supplement, there is a need for the reference of friends.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
