AngularJS Events

AngularJS has its own HTML event directives.

ng-click Directive

The ng-click directive defines an AngularJS click event.

AngularJS Example

<div ng-app="" ng-controller="myCtrl"><button ng-click="count = count + 1">Click Me!</button>
<p>{{ count }}</p></div>

Hide HTML Elements

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

ng-hide="true" makes the HTML element invisible.

ng-hide="false" makes the HTML element visible.

AngularJS Example

<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>Full 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>

Application Explanation:

The first part personController is similar to the controller section.

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

The ng-hide directive sets the visibility of the <p> element and two input fields 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 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" can make the HTML element invisible.

ng-show="true" can make the HTML element visible.

The following example uses the ng-show directive:

AngularJS Example

<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="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br><br>Full Name: 
{{firstName + " " + lastName}}</p></div>
<script>var app = angular.module('myApp', []);app.controller('personCtrl', 
 function($scope) {    $scope.firstName 
 = "John",    $scope.lastName = "Doe"    $scope.myVar 
= true;    $scope.toggle = function() {        
$scope.myVar = !$scope.myVar;    }});</script>