AngularJS events



AngularJS has its own HTML event directives.


ng-click directive

ng-click directive defines the AngularJS click event.

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-app="myApp" ng-controller="myCtrl">

<button ng-click="count = count + 1">点我!</button>

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

</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.count = 0;
});
</script>

</body>
</html>

Run instance»

Click the "Run instance" button to view the online instance


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.

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div 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>
姓名: {{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>

</body>
</html>

Run instance»

Click the "Run instance" button to view the online instance

Application analysis:

The first partpersonController is similar to the controller chapter.

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

ng-hide The instruction sets whether the <p> element and the two input fields are visible, based on the value of myVar (true or false ) to set whether it is visible.

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

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:

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

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

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

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

</div>

<script>
var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
    $scope.person = {
        firstName: "John",
        lastName: "Doe"
    };
    $scope.myVar = true;
    $scope.toggle = function() {
        $scope.myVar = !$scope.myVar;
    };
});
</script>

</body>
</html>

Running example»

Click the "Run Instance" button to view the online instance