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>
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>
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>
Color Picker
