AngularJS
HTML event
This section describes
Use of HTML events for AngularJS.
AngularJS has its own
HTML event directive.
ng-click instruction
The ng-click
instruction defines an AngularJS click event.
AngularJS instance
<div ng-app="myApp" ng-controller="myController">
<button ng-click="count = count + 1">点我！</button>
<p>{{ count }}</p>
</div>
Hide HTML elements
The ng-hide instruction
is used to set up a portion of the app
that is not visible.
ng-hide"true" makes
HTML elements
invisible.
ng-hide"false" makes the
element visible.
AngularJS instance
<div ng-app="myApp" ng-controller="personController">
slt;button ng-click-"toggle()""
<p ng-hide="myVar">
Name: slt;input type-"text" ng-model?person.firstName"
Last name: slt;input type," "text" ng-model, "person.lastName", slt;br>
<br>
Name: .person.firstName .
</p>
</div>
<script>
function personController($scope) {
$scope.person = {
firstName: "John",
lastName: "Doe"
};
$scope.myVar = false;
$scope.toggle = function() {
$scope.myVar = !$scope.myVar;
};
}
</script>
Try it out . . .
App resolution:
The first part of personController
is similar to the controller section.
The app has a default property:
$scope.myVar s false;
Elements in the ng-hide
instruction settings app are not visible.
The toggle() function
is used to
switch the values
(true and false) of the myVar variable.
ng-hide"true" makes
the
element invisible.
Html elements are displayed
The ng-show instruction can
be used to set up a portion of the app that is
visible.
The ng-show"false" can
be set to HTML elements
that are not visible.
ng-show-"true" can be
visible by setting HTML elements.
The following example uses the ng-show instruction:
AngularJS instance
<div ng-app="myApp" ng-controller="personController">
slt;button ng-click-"toggle()""
<p ng-show="myVar">
Name: slt;input type-"text" ng-model?person.firstName"
Last name: slt;input type," "text" ng-model, "person.lastName", slt;br>
<br>
Name: .person.firstName .
</p>
</div>
<script>
function personController($scope) {
$scope.person = {
firstName: "John",
lastName: "Doe"
};
$scope.myVar = true;
$scope.toggle = function() {
$scope.myVar = !$scope.myVar;
};
}
</script>
Try it out . . .