Of Stack

Detailed Explanation of Events in AngularJS

  • 2021-07-06 09:48:51
  • OfStack

AngularJS event

AngularJS has its own HTML event directives.

ng-click instruction

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"> Order me! </button>

<p>{{ count }}</p>

</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.count = 0;
});
</script>

</body>
</html>

Running effect:

Order me!

0

Hide HTML element

The ng-hide directives are used to set whether the application section is visible.

ng-hide= "true" Sets the HTML element not visible.

ng-hide= "false" Sets the HTML element 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 / Display </button>

<p ng-hide="myVar">
 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 results:

Hide/Show

Name:
Last name:

Name: John Doe

Application parsing:

Part 1, personController, is similar to the Controller section.

The application has one default attribute: $scope. myVar = false;

ng-hide instruction setting < p > Element and the two input fields are visible, based on the value of myVar (true or false).

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

ng-hide= "true" makes elements invisible.

Display HTML Elements

The ng-show directive can be used to set whether Part 1 is visible in the application.

ng-show= "false" You can set the HTML element not visible.

ng-show= "true" can be made visible by setting the HTML element.

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 / Display </button>

<p ng-show="myVar">
 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 results:

Hide/Show

Name:
Last name:

Name: John Doe

The above is the collation of AngularJS event data, and the follow-up will continue to be supplemented. Friends in need will refer to it.

Related articles: