Angularjs Quick Start Guide 11: Events

ANGULARJS has its own HTML event directive.

Ng-click directive

　　The ng-click directive defines the Angularjs click event.

<DivNg-app=""Ng-controller= "Myctrl"><ButtonNg-click= "Count = Count + 1">Click me!</Button><P>{{count}}</P></Div>

Run

Hide HTML elements

　　The ng-hide directive can be used to display (or hide) Some of the content in the application.

　　ng-hide= "True" will make the HTML element invisible(that is, hidden).

　　ng-hide= "False" causes the HTML element to be visible (that is, viewable).

<DivNg-app= "MYAPP"Ng-controller= "Personctrl"><ButtonNg-click= "Toggle ()">Toggle</Button><PNg-hide= "MyVar">First Name:<inputtype= "text"Ng-model= "FirstName"><BR>Last Name:<inputtype= "text"Ng-model= "LastName"><BR><BR>Full Name: {{firstName + "" + LastName}}</P></Div><Script>varapp=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>

Run

Code Explanation:

　　Personctrl defines a controller, which is the same as in the controller chapter.

Application has a default property (variable):$scope. MyVar = false;

Element <p> has two input tags, and theng-hide instruction sets the visibility by the value of the myval variable (TRUE or false).

The function Toggle () is used to convert the value of the myVar variable to TRUE or FALSE.

HTML elements are hidden (that is, invisible) when ng-hide= "true" .

displaying HTML elements

　　The ng-show directive can also be used to display (or hide) portions of the application (as opposed to the Ng-hide Directive).

　　ng-Show= "false" will make the HTML element invisible(that is, hidden).

　　ng-Show= "true" will make the HTML element visible (that is, viewable).

The example in the previous section can also be used ng-show instead of implementing the same functionality:

<DivNg-app= "MYAPP"Ng-controller= "Personctrl"><ButtonNg-click= "Toggle ()">Toggle</Button><PNg-show= "MyVar">First Name:<inputtype= "text"Ng-model= "FirstName"><BR>Last Name:<inputtype= "text"Ng-model= "LastName"><BR><BR>Full Name: {{firstName + "" + LastName}}</P></Div><Script>varapp=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>

Run

Previous chapter-Angularjs Quick Start Guide 10:dom node Next chapter-Angularjs Quick Start Guide 12: Modules

Angularjs Quick Start Guide 11: Events