Sunday, 26 April 2015

AngularJS Events

AngularJS has its own HTML events directives.

The ng-click Directive:
The ng-click directive defines an AngularJS click event.
<div ng-app="" ng-controller="myCtrl">
<button ng-click="count = count + 1">Click me!</button>
<p>{{ count }}</p>
</div>


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.
<div ng-app="myApp" ng-controller="personCtrl">

<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>
var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
    $scope.firstName = "Ravi",
    $scope.lastName = "Gupta"
    $scope.myVar = false;
    $scope.toggle = function() {
        $scope.myVar = !$scope.myVar;
    };
});
</script>

Application explained:
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:
<div ng-app="myApp" ng-controller="personCtrl">

<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>
var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
    $scope.firstName = "Ravi",
    $scope.lastName = "Gupta"
    $scope.myVar = true;
    $scope.toggle = function() {
        $scope.myVar = !$scope.myVar;
    }
});
</script>


No comments:

Post a Comment