Events of AngularJS Learning

1.ng-click directive: Defines the Angularjs click event

<div ng-app= "" ng-controller= "Myctrl" >

<button ng-click= "Count=count+1" > Point me! </button>

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

</div>

2. Hide HTML elements:

The **ng-hide directive is used to set whether the app part is visible

**ng-hide= "true" to set HTML element not visible

**ng-hide= "false" to set HTML elements to be visible

<div ng-app= "myApp" ng-controller= "Personctrl" >

<button ng-click= "Toggle ()" > Hide/Show </buttton>

<p ng-hide= "MyVar" >//ng-hide instruction Settings <p> elements and two input fields are visible, depending on the value of MyVar (True or false) to set whether it is visible

Name: <input type= "text" ng-model= "FirstName" ><br>

Name: <input type= "text" ng-model= "LastName" ><br>

<br>

Full name:{{firstname+ "" +lastname}}

</p>

<script>

var app=angular.module (' myApp ', []);

App.controller (' Personctrl ', function ($scope) {

$scope. Firstname= "John",

$scope. Lastname= "Doe",

$scope. Myvar=false;

$scope. Toggle=function () {//toggle () function toggles the value of the MyVar variable (TRUE or FALSE)

$scope. myvar=! $scope. MyVar ();

}

});

</script>

</div>

3. Display HTML elements: The ng-show directive is used to set whether a part of the app is visible;

**ng-show= "false" to set HTML element not visible

**ng-show= "True" to set HTML elements to be visible

<div ng-app= "myApp" ng-controller= "Personctrl" >

<button ng-click= "Toggle ()" > Hide/Show </button>

<p ng-show= "MyVar" >

Name: <input type= "text" ng-model= "FirstName" ><br>

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=true;

$scope. Toggle=function () {

$scope. myvar=! $scope. MyVar;

}

});

</script>

Events of AngularJS Learning