AngularJS event
AngularJS HTML event has its own instruction.
ng-click command
ng-click directive defines AngularJS click event.
AngularJS examples
<Button ng-click = "count = count + 1"> Point me! </ Button>
<P> {{count}} </ p>
</ Div>
try it"
Hide HTML elements
ng-hide directive sets application part is visible.
ng-hide = "true" Setting HTML elements are not visible.
ng-hide = "false" Setting HTML element is visible.
AngularJS examples
<Button ng-click = "toggle ()">> Hide / Show </ button>
<P ng-hide = "myVar ">
Name: <input type = "text" ng-model = "firstName"> <br>
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"
Application Analysis:
The first part personController controller section similar.
Application has a default attribute: $ scope.myVar = false;
ng-hide instruction sets <p> element and two input fields are visible, depending on the value of myVar (true or false) set is visible.
toggle () function is used to switch the value of myVar variable (true and false).
ng-hide = "true" so that element is not visible.
Display HTML elements
ng-show instruction can be used to set whether the application portion of the visible.
ng-show = "false" you can set HTML elements are not visible.
ng-show = "true" can set the HTML element is visible.
The following example uses ng-show command:
AngularJS examples
<Button ng-click = "toggle ()"> Hide / Show </ button>
<P ng-show = "myVar ">
Name: <input type = "text" ng-model = "firstName"> <br>
Surname: <input type = "text" ng-model = "lastName"> <br>
<Br>
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"