AngularJS Events
AngularJS has its own HTML event directives.
ng-click Directive
ng-clickThe directive defines AngularJS click events.
AngularJS Example
<button ng-click="count = count + 1">Click me!</button>
<p>{{ count }}</p>
</div>
Try it Yourself »
Hide HTML Elements
ng-hideThe directive is used to set whether a part of the application is visible.
ng-hide="true"Set HTML elements to be invisible.
ng-hide="false"Set HTML elements to be visible.
AngularJS Example
<button ng-click="toggle()">Hide/Show</button>
<p ng-hide="myVar">
Name:<input type="text" ng-model="firstName"><br>
Full 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 = "John",
$scope.lastName = "Doe"
$scope.myVar = false;
$scope.toggle = function() {
$scope.myVar = !$scope.myVar;
};
});
</script>
Try it Yourself »
Application explanation:
Part 1personControllerSimilar to the controller chapter.
The application has a default property:$scope.myVar = false;
ng-hideThe directive sets whether the <p> element and the two input fields are visible, according tomyVarthe value (true or false) to set visibility.
toggle()The function is used to togglemyVarthe value of the variable (true and false).
ng-hide="true"Make the elementinvisible。
Show HTML Elements
ng-showThe directive can be used to set whether a part of the application isvisible 。
ng-show="false"You can set HTML elementsinvisible。
ng-show="true"You can set HTML elements to be visible.
The following example uses the ng-show directive:
AngularJS Example
<button ng-click="toggle()">Hide/Show</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 = "John",
$scope.lastName = "Doe"
$scope.myVar = true;
$scope.toggle = function() {
$scope.myVar = !$scope.myVar;
}
});
</script>
Try it Yourself »