How to define click event in AngularJS? Detailed introduction to angularjs events

This article mainly introduces the detailed analysis of events in angularjs, as well as examples of the ng-click directive of angularjs, and finally the analysis of HTML hidden elements. Let’s take a look at this article

AngularJS Event

AngularJS has its own HTML event instruction.

ng-click directive

ng-click directive defines the AngularJS click event.

AngularJS Example

<p ng-app="" ng-controller="myCtrl">

##< button ng-click="count = count 1">Click me!</button>

<p>{{ count }}</p>

</p>

Hide HTML elements

ng-hide directive is used to set whether the application part is visible.

ng-hide="true" Set the HTML element to be invisible.

ng-hide="false" Set the HTML element to be visible.

AngularJS 实例

<p ng-app="myApp" ng-controller="personCtrl">

<button ng-click="toggle()">>隐藏/显示</button>

<p ng-hide="myVar">
名: <input type="text" ng-model="firstName"><br>
姓名: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName " " lastName}}
</p>

</p>

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

Application analysis:

The first part personController is similar to the controller chapter.

The application has a default attribute: $scope.myVar = false;

##ng-hide The directive sets the

element and two Whether the input field is visible or not is set based on the value of myVar (true or false).

toggle() The function is used to switch the value of myVar variable (true and false).

ng-hide="true" Make the element invisible.

Show HTML elements

ng-show The directive can be used to set whether a part of the application is visible.

ng-show="false" You can set HTML elements invisible.

ng-show="true" You can set HTML elements to be visible.

The following examples use the ng-show directive:

AngularJS Example

<p ng-app="myApp" ng-controller="personCtrl">

<button ng-click="toggle()">隐藏/显示</button>

<p ng-show="myVar">
名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{firstName " " lastName}}
</p>

</p>

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

This article ends here (if you want to see more, go to the PHP Chinese websiteAngularJS User Manual), if you have any questions, you can leave a message below.

The above is the detailed content of How to define click event in AngularJS? Detailed introduction to angularjs events. For more information, please follow other related articles on the PHP Chinese website!