X
HOME HTML5 CSS3 JAVASCRIPT SQL PHP5 JQUERY ANGULAR BOOTSTRAP3 XML MORE...
REFERENCES | EXAMPLES | FORUM | ABOUT

AngularJS Events


AngularJS has its own HTML events directives.


The ng-click Directive

The ng-click directive defines an AngularJS click event.

AngularJS Example

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

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

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

</div>

Try it Yourself »


Hiding HTML Elements

The ng-hide directive can be used to set the visibility of a part of an application.

The value ng-hide="true" makes an HTML element invisible.

The value ng-hide="false" makes the element visible.

AngularJS Example

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

<button ng-click="toggle()">Toggle</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>
function personController($scope) {
    $scope.firstName = "John",
    $scope.lastName = "Doe"
    $scope.myVar = false;
    $scope.toggle = function() {
        $scope.myVar = !$scope.myVar;
    };
}
</script>

Try it Yourself »

Application explained:

The first part of the personController is the same as in the chapter about controllers.

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

The ng-hide directive sets the visibility, of a <p> element with two input fields, according to the value (true or false) of myVar.

The function toggle() toggles myVar between true and false.

The value ng-hide="true" makes the element invisible.


Showing HTML Elements

The ng-show directive can also be used to set the visibility of a part of an application.

The value ng-show="false" makes an HTML element invisible.

The value ng-show="true" makes the element visible.

Here is the same example as above, using ng-show instead of ng-hide:

AngularJS Example

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

<button ng-click="toggle()">Toggle</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>
function personController($scope) {
    $scope.firstName = "John",
    $scope.lastName = "Doe"
    $scope.myVar = true;
    $scope.toggle = function() {
        $scope.myVar = !$scope.myVar;
    };
}
</script>

Try it Yourself »



Your suggestion:

Close [X]

Thank You For Helping Us!

Your message has been sent to W3Schools.

Close [X]
Search w3schools.com:

WEB HOSTING

UK Reseller Hosting

WEB BUILDING

Download XML Editor FREE Website BUILDER Free HTML5 Templates

SHARE THIS PAGE

facebook